@charset "utf-8";

@font-face {
    font-family: "Dessau-M";
    src: url("fonts/Dessau-Medium.otf") format("opentype");
}

@font-face {
    font-family: "Dessau-M";
    src: url("fonts/Dessau-Med.ttf") format("truetype");
}

@font-face {
    font-family: "Dessau-L";
    src: url("fonts/Dessau-Light.otf") format("opentype");
}

@font-face {
    font-family: "Dessau-L";
    src: url("fonts/Dessau-Light.ttf") format("truetype");
}



@font-face {
    font-family: "Dessau-H";
    src: url("fonts/Dessau-Heavy.otf") format("opentype");
}




@font-face {
    font-family: "Roboto-R";
    src: url("fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto-T";
    src: url("fonts/Roboto-Thin.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto-B";
    src: url("fonts/Roboto-Black.ttf") format("truetype");
}


body {
    font-family: "Roboto-R";
    font-weight: normal;
    color: #888;
    color: #535353;
    background-colorx: #32a852;
    background-colorx: rgba(50, 168, 82, 1.0);
    background-color: #dbeff6;
    font-sizex: 12pt;
    font-size: 1rem;
}


.merrid {
    font-family: "Dessau-H";
}

p {
    margin-top: .05rem;
    margin-bottom: .4rem;
    paddingx: 0;
    line-heightx: 155%;
    padding-bottomx: 2px;
}


a {
    outline: none;
    color: #2f2f30;
    color: #71c442;
    text-decoration: none;
    padding-bottomx: 1px;
}

a:hover {
    color: #63656a;
    color: #426175;
    font-weight: normal;
    font-weight: 400;
}

p {
    line-height: 124%;
    margin-top: 4px;
}

hr {
    color: #000;
    opacity: 1;
    margin-top: 30px;
    margin-bottom: 30px;
}


.h1,
.h2,
.h3,
h1,
h2,
h3 {
    font-family: "Roboto-R";
    margin-top: .2rem;
    margin-bottom: .3rem;
    line-height: 120%;
}

.h1,
h1 {
    font-size: calc(1.1667rem + .5vw);
    color: #046fc1;
    font-family: "Roboto-R";
    line-height: 120%;
}

.h1,
h1 a {
    color: #046fc1;
}

.h2,
h2 {
    font-size: calc(1.1667rem + .4vw);
    color: #535353;
}

.h2,
h2 a {
    color: #535353;
}

.h3,
h3 {
    color: #535353;
    font-size: calc(1rem + .2vw);
    margin-bottom: 2px;
}

.small-caps {
    font-variant-caps: all-small-caps;
}

@media (min-width:1199.98px) {}


.green {
    color: #71c442;
    color: rgba(113, 196, 66, 1);
}

.grey {
    color: #666;
    color: rgba(83, 83, 83, 1);
}


.blue {
    color: #046fc1;
    color: rgba(4, 111, 193, 1);
}

.bluedark {
    color: #07458e;
    color: rgba(7, 69, 142, 1);
}

.bluesteel {
    color: #426175;
    color: rgba(66, 97, 117, 1);
}

.black {
    color: #000;
}

.red {
    color: #e00512;
}

.small {
    font-size: .6667rem;
}



.ulink-link {
    border-bottomx: solid 2px #71c442;
    border-bottom: solid 1px rgba(113, 196, 66, .2);
    display: inline;
}

.ulink-link:hover {
    border-bottomx: solid 2px #426175;
    border-bottom: solid 1px rgba(66, 97, 117, 1.0);
    display: inline;
}

.ulink-grey {
    border-bottomx: solid 2px #535353;
    border-bottom: solid 1px rgba(83, 83, 83, .2);
    display: inline;
}

.ulink-grey:hover {
    border-bottomx: solid 2px #426175;
    border-bottom: solid 1px rgba(66, 97, 117, 1.0);
    display: inline;
}

.ulink-blue {
    border-bottomx: solid 2px #046fc1;
    border-bottom: solid 1px rgba(4, 111, 193, .2);
    display: inline;
}

.ulink-blue:hover {
    border-bottomx: solid 2px #426175;
    border-bottom: solid 1px rgba(66, 97, 117, 1.0);
    display: inline;
}

.ulink-bluesteel {
    border-bottomx: solid 2px #426175;
    border-bottom: solid 1px rgba(66, 97, 117, .2);
    display: inline;
}

.ulink-bluesteel:hover {
    border-bottomx: solid 2px #426175;
    border-bottom: solid 1px rgba(66, 97, 117, 1.0);
    display: inline;
}

ul li {
    font-size: 1rem;
}

a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}


/* X-Small devices (portrait phones, less than 576px) */
@media (min-width: 575.98px) {
    bodyx {
        background-color: yellow;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) {
    bodyx {
        background-color: red;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 991.98px) {
    bodyx {
        background-color: blue;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 1199.98px) {
    bodyx {
        background-color: orange;
    }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (min-width: 1399.98px) {
    bodyx {
        background-color: purple;
    }
}

/* Info bar */

.info-bar {
    width: 100%;
    margin: 0;
    padding: 1%;
    color: #2f2f30;
    color: #fff;
    background-color: #32a852;
    background-color: rgba(50, 168, 82, 1.0);
    background-color: #71c442;
    font-family: "Roboto-R";
    font-size: 1rem;
    text-align: center;
}

.info-bar p {
    margin: 0;
}

.info-bar a {
    color: #fff;
    font-weight: 500;
}

.info-bar a:hover {
    color: #424243;
    color: #222;
    color: #07458e;
    color: #426175;
}

.info-bar i {
    margin-right: 6px;
}

@media (min-width: 767.98px) {
    .info-bar {
        padding: 1%;
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (min-width: 991.98px) {
    .info-bar {
        font-size: 110%;
    }
}

.wrapper {
    margin: 4%;
    margin-top: 2%;
    margin-bottom: 0;
}


@media (min-width: 767.98px) {

    margin: 4%;
    margin-bottom: 0;
}


/* Top Bar */

.top-bar {
    width: 100%;
    margin: 0;
    padding: 5%;
    padding-top: 0;
    padding-bottom: 0;
    color: #2f2f30;
    background-color: #f8f7f1;
    background-color: rgba(248, 247, 241, 1);
    background-color: #fff;
    font-family: "Roboto-R";
}

.top-bar a {
    color: #2f2f30;
    font-weight: 500;
}

.top-bar a:hover {
    color: #424243;
    color: #426175;
}


@media (min-width: 767.98px) {
    .top-bar {
        padding: 1%;
        padding-left: 5%;
        padding-right: 5%;
    }
}


/* Hamburger */

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    margin-top: 10px;
}

.navbar-toggler i {
    color: #71c442;
}


/* Logo */

.navbar-custom .logo img {
    width: 100%;
    height: auto;
    max-width: 180px;
}


/* Navigation */

.navbar-custom {
    text-align: right;
    color: #2f2f30;
}

.navbar-custom a {
    padding-bottom: 0;
    text-decoration: none;
    font-weight: normal;
    font-sizex: 10pt;
    font-size: 0.833rem;
    paddingx: 4px;
    padding-leftx: 6px !important;
    padding-rightx: 6px !important;
    display: inline;
    font-weight: normal;
    color: #71c442;
}

.navbar-custom a:hover {
    color: #666;
    color: #426175;
}

.navbar-custom .nav-link {
    padding-left: 0;
    padding-right: 0;
}

.navbar-custom .nav-link.disabled {
    color: #666;
    color: #426175;
}

.navbar-custom a i {
    font-size: 118% !important;
}

.navbar-custom ul {
    margin-top: 6px;
}

.navbar-custom li {
    margin-left: 0;
    margin-right: 0;
    padding-top: 4px;
}

.navbar-custom.navbar li:first-child {
    padding-top: 6px;
}

.navbar-custom.navbar li:last-child {
    padding-top: 10px;
    display: block;
}

.navbar-custom .desc {
    display: none;
    font-size: 80%;
    font-variant: small-caps;
    line-height: 102%;
}

@media (min-width: 767.98px) {

    .navbar-custom a i {
        font-size: 130% !important;
    }

    .navbar-custom ul {
        margin-top: 10px;
    }

    .navbar-custom li {
        padding-top: 0;
        margin-left: 8px;
        margin-right: 8px;
        text-align: center;
    }

    .navbar-custom.navbar li:first-child {
        padding-top: 0;
    }

    .navbar-custom.navbar li:last-child {
        padding-top: 0;
        margin-left: 14px;
        display: block;
    }

}

@media (min-width: 991.98px) {

    .navbar-custom a i {
        font-size: 140% !important;
    }

    .navbar-custom li {
        margin-left: 20px;
        margin-right: 20px;
    }

}

@media (min-width: 1199.98px) {
    .navbar-custom a i {
        font-size: 130% !important;
    }

    .navbar-custom a {
        font-size: 104%;
    }

    .navbar-custom li {
        margin-left: 26px;
        margin-right: 26px;
    }

    .navbar-custom.navbar li:first-child {
        padding-top: 16px;
        margin-left: 0;
    }

    .navbar-custom.navbar li:last-child {
        padding-top: 16px;
        margin-right: 0;
        display: block;
    }

    .navbar-custom .desc {
        display: block;
    }
}


/* -- */



.container-main {
    width: 100%;
    background-colorx: #f8f7f1;
    background-colorx: rgba(248, 247, 241, 1);
}

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

.container-custom {
    margin: 0;
    width: 100%;
    padding: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    text-align: center;
    background-color: #fff;
}

.container-custom img {
    width: 100%;
    height: auto;
}

.container-custom .header {
    font-size: 105%;
    colorx: #71c442;
    margin-bottom: 10px;
    font-familyx: "Dessau-M", sans-serif;
}

.container-custom .header br {
    display: none;
}

.container-custom .subheader {
    font-size: 100%;
    colorx: #71c442;
    colorx: #2f2f30;
    margin-bottom: 4px;
    font-familyx: "Dessau-M", sans-serif;
}


.container-custom .pic-text {
    font-size: 90%;
    margin-top: 10px;
}

.container-custom i {
    font-size: 120%;
    color: #71c442;
    margin-right: 10px;
}

.container-custom i:hover {
    color: #666;
    color: #426175;
}

@media (min-width: 767.98px) {
    .container-custom {
        padding-top: 3%;
        padding-bottom: 3%;
    }

    .container-custom .header {
        font-size: 120%;
    }
}

@media (min-width: 991.98px) {
    .container-custom .header {
        font-size: 120%;
    }

    .container-custom .header br {
        display: inline-block;
    }
}

/* Cards */

.card-custom {
    background-color: #FAF9EE;
    border-color: #FBF3D5;
    border-color: #bca89f;
}

.card-custom ul {
    margin-top: 8px;
    margin-bottom: 0;
    text-align: left;
}

.card-custom ul li {
    font-size: 80%;
}

.card-text {
    font-size: 90%;
    margin-top: 10px;
}

.card-body-custom {
    border-top: 1px #bca89f solid;
    border-bottom: 1px #bca89f solid;
}

.card-footer-custom-home {
    paddingx: 0;
    border-top: none;
    background-color: rgba(113, 196, 66, 1);
}

.card-footer-custom-home:hover {
    background-color: rgba(113, 196, 66, .9);
}


.card-footer-custom {
    paddingx: 0;
    font-size: 80%;
    border-top: none;
    background-color: rgba(255, 255, 255, 1);
}

.card-footer-customx:hover {
    background-color: rgba(113, 196, 66, .9);
}

.link-btn {
    color: #fff;
    background-colorx: #71c442;
    background-colorx: rgba(113, 196, 66, .8);
    border: none;
}

.link-btn:hover {
    color: #426175;
    background-colorx: #71c442;
    background-colorx: rgba(113, 196, 66, 1);
}


/* Carousel */

.carousel-custom {
    margin-bottom: 10%;
}

.carousel-indicators-custom {
    position: relative;
    margin-bottomx: -20px;
}

.carousel-indicators-custom [data-bs-target] {
    /* Rub out indicators by making them the same as the background colour */
    background-colorx: #f9f5ee;
    background-color: rgba(249, 245, 238, 1);
}

.carousel-indicators-custom button[data-bs-target] {
    width: 100px;
    width: 30%;
    background-colorx: #f9f5ee;
    background-color: rgba(249, 245, 238, 1);

}

/*--*/

.link-ul {
    border-bottomx: solid 2px #71c442;
    border-bottom: solid 1px rgba(31, 158, 35, .4);
}

.link-ul:hover {
    border-bottomx: solid 2px #71c442;
    border-bottom: solid 1px rgba(31, 158, 35, 1.0);
}


.email-link {
    white-space: nowrap;
}

.text-nowrap {
    white-space: nowrap;
}


.bk-white {
    background-color: #fff;
}

.bk-beige {
    background-color: #f8f7f1;
    background-color: rgba(248, 247, 241, 1);
}

.bk-blue {
    background-color: #23b5e6;
    background-color: rgba(35, 181, 230, .6);
}


/* Top backgrounds */


.bk-lorry {
    background: url(../images/merrid-fencing-supplies-delivery.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: auto;
    min-height: 320px;
    position: relative;
}

.bk-fence {
    background: url(../images/fencing-supplies-hampshire.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: auto;
    min-height: 320px;
    position: relative;
}

.bk-posts {
    background: url(../images/fence-posts-chichester-delivery.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: auto;
    min-height: 320px;
    position: relative;
}


.bk-ironmongery {
    background: url(../images/ironmongery-fencing-bolts-gate-hinges.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: auto;
    min-height: 320px;
    position: relative;
}

.bk-lorry-trans {
    margin: 0;
    padding: 2%;
    padding-left: 5%;
    padding-right: 5%;
    background-colorx: rgba(35, 181, 230, .7);
    background-color: rgba(255, 255, 255, .8);
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.bk-lorry-trans h3 {
    font-size: 90%;
}

@media (min-width: 575.98px) {
    bk-lorry-trans {
        padding: 2%;
        padding-left: 5%;
        padding-right: 5%;
    }
}


@media (min-width: 767.98px) {
    .bk-lorry-trans {
        background-colorx: rgba(35, 181, 230, .7);
        background-color: rgba(255, 255, 255, .7);
        padding: 1%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .bk-lorry-trans h3 {
        font-size: 100%;
    }
}

@media (min-width: 991.98px) {
    .bk-lorry {
        min-height: 420px;
        padding: 1%;
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* - */


.tel {
    white-space: nowrap;
}

.tel-big {
    white-space: nowrap;
    font-size: 140%;
}


.email {
    white-space: nowrap;
}


/* Footer */

.footer {
    margin: 0;
    padding: 5%;
    padding-left: 5%;
    padding-right: 5%;
    text-align: left;
    font-size: calc(0.833rem + 0.2vw);
    color: #000;
    background-color: #fff;
    background-color: rgba(35, 181, 230, .7);
}

.footer .header {
    font-size: calc(0.833rem + 0.3vw);
    color: #000;
    padding-bottom: 10px;
    font-family: "Dessau-L", sans-serif;
}

.footer .subheader {
    font-size: calc(0.833rem + 0.2vw);
    font-family: "Dessau-L", sans-serif;
}

.footer .desc {
    margin-left: 26px;
    font-variant: small-caps;
    font-size: 80%;
}



.footer img {
    width: 100%;
    height: auto;
    max-width: 120px;
}

.footer a {
    color: #3c3c3e;
    text-decoration: none;
    font-weight: normal;
}

.footer a:hover {
    color: #fff;
    color: #426175;
    color: #046fc1;
}

.footer .disabled {
    color: #046fc1;
}

.footer i {
    margin-right: 6px;
    color: #fff;
    color: #046fc1;
    width: 20px;
}

.footer .icon {
    margin-bottom: 10px;
}

@media (min-width: 575.98px) {}

@media (min-width: 767.98px) {
    .footer {
        padding-top: 3%;
        padding-bottom: 3%;
    }
}


//* Footer address display  (one line on -md-) */

.footer .address {}

.footer .address-indent {
    margin-left: 26px;
}

.footer .address br {
    display: inline-block;
}

@media (min-width: 575.98px) {}

@media (min-width: 767.98px) {
    .footer .address-indent {
        margin-left: 0;
    }

    .footer .address br {
        display: none;
    }
}


@media (min-width: 991.98px) {
    .footer .address-indent {
        margin-left: 26px;
    }

    .footer .address br {
        display: inline-block;
    }
}


@media (min-width: 1199.98px) {}


/* Delivery bar */

.delivery-bar {
    width: 100%;
    margin: 0;
    padding: 1%;
    color: #fff;
    background-color: #046fc1;
    font-family: "Roboto-R";
    font-size: 1rem;
    text-align: center;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.delivery-bar p {
    margin: 0;
}

.delivery-bar a {
    color: #fff;
    font-weight: 500;
}

.delivery-bar a:hover {
    color: #222;
    color: #07458e;
}

.delivery-bar i {
    margin-right: 6px;
}

@media (min-width: 767.98px) {
    .delivery-bar {
        padding: 1%;
        padding-left: 5%;
        padding-right: 5%;
        font-sizex: 120%;
    }
}

@media (min-width: 991.98px) {
    .delivery-bar {
        font-size: 110%;
    }
}


/* Bottom */

.container-bottom {
    width: 100%;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 3%;
    padding: 0;
}

.copyright {
    color: #495057;
    font-sizex: 9pt;
    font-size: 0.75rem;
    text-align: left;
    padding: 0
}

.nisa {
    text-align: left;
    padding: 0;
}

@media (min-width: 991.98px) {
    .container-bottom {}

    .nisa {
        text-align: right;
    }
}

.bottom-inner {
    margin: 0px auto;
    margin-left: 4%;
    margin-right: 4%;
}


/* Back to top */

#scroll {
    position: fixed;
    outline: none;
    right: 6px;
    bottom: 10px;
    cursor: pointer;
    width: 30px;
    height: 28px;
    background-color: #71c442;
    border: none;
    box-shadow: rgba(50, 50, 93, 0.5) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    text-indent: -9999px;
    display: none;
    opacity: 0.9;
    border-radius: 10px;
    z-index: 99999;
}


#scroll span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid #000;

}

#scroll:hover {
    background-color: #71c442;
    background-color: #fff;

}


/* */


/* -- */