@import url('https://d2ta2fpo91apla.cloudfront.net/fontawesome-free-5.9.0-web/css/all.css');

/*** GENERAL SECTIONS STYLE -----------------------------------------------------------*/


/*** RESET THEME SPACING ---------------------------------*/


/* Remove default margin-bottom from all divs */

.wpb_wrapper>div {
    margin-bottom: 0;
}


/* Remove default padding for all columns */

/*.homepage.hero.hero-six-bg.overflow.form_adj .vc_custom_1700200083866{*/
/*background-color: red !important;*/
/*}*/

.vc_column-inner.vc_custom_1700200083866 {
    background-color: #000 !important;
    padding: 50px !important;
}

/*form_adjustments end from here*/





.vc_column_container>.vc_column-inner {
    padding: 0;
}


/*reset theme*/

.vc_column-inner .wpb_wrapper .vc_row {
    margin-left: 0;
    margin-right: 0;
}


/* Remove columns padding-top */

.vc_col-has-fill>.vc_column-inner,
.vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner,
.vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner,
.vc_row-has-fill>.vc_column_container>.vc_column-inner {
    padding-top: 0px;
}


/* Remove margin from paragraph */

p {
    margin: 0;
}


/* Remove default margin-bottom from all elemets */

.wpb_content_element {
    margin-bottom: 0;
}


/* set the wrapper width to the default theme one */

@media only screen and (max-width: 767px) {
    .section_wrapper,
    .container,
    .four.columns .widget-area {
        max-width: 700px !important;
    }
}

.slogan p {
    font-family: Georgia, Times, serif;
    text-transform: inherit;
    color: #4c4c4c;
    line-height: 1.2;
    font-size: 35px !important;
    margin-bottom: 15px !important;
}


/* CUSTOM SPACING ---------------------------------*/


/* padding left and right is given only when the row is stretch otherwise it mess up the padding right and left calculated by the theme*/

.pad-xl {
    padding-top: 12%;
    padding-bottom: 12%;
}

.pad-xl[data-vc-stretch-content] {
    padding-right: 5%;
    padding-left: 5%;
}

.pad-lg {
    padding-top: 10%;
    padding-bottom: 10%;
}

.pad-lg[data-vc-stretch-content] {
    padding-right: 5%;
    padding-left: 5%;
}

.pad-md {
    padding-top: 8%;
    padding-bottom: 8%;
}

.pad-md[data-vc-stretch-content] {
    padding-right: 5%;
    padding-left: 5%;
}

.pad-sm {
    padding-top: 6%;
    padding-bottom: 6%;
}

.pad-sm[data-vc-stretch-content] {
    padding-right: 5%;
    padding-left: 5%;
}

.pad-xs {
    padding-top: 4%;
    padding-bottom: 4%;
}

.pad-xs[data-vc-stretch-content] {
    padding-right: 5%;
    padding-left: 5%;
}


/* make side padding equal */

@media (max-width:1300px) {
    .pad-xl:not(.vc_inner),
    .pad-lg:not(.vc_inner),
    .pad-md:not(.vc_inner),
    .pad-sm:not(.vc_inner),
    .pad-xs:not(.vc_inner) {
        padding-right: 5% !important;
        padding-left: 5% !important;
    }
}


/* COLUMN PADDING ---------------------------------*/


/* Inner column padding */

.pad-xl-col>.vc_column-inner {
    padding: 12% 12% !important;
}

.pad-lg-col>.vc_column-inner {
    padding: 10% 10% !important;
}

.pad-md-col>.vc_column-inner {
    padding: 8% 8% !important;
}

.pad-sm-col>.vc_column-inner {
    padding: 6% 6% !important;
}

.pad-xs-col>.vc_column-inner {
    padding: 4% 4% !important;
}




/*form_adjustments start from here*/



@media (max-width: 768px) {
    .pad-xl-col>.vc_column-inner,
    .pad-lg-col>.vc_column-inner,
    .pad-md-col>.vc_column-inner,
    .pad-sm-col>.vc_column-inner,
    .pad-xs-col>.vc_column-inner {
        padding-right: 5% !important;
        padding-left: 5% !important;
    }
}


/* REMOVE PADDING ---------------------------------*/


/* Remove padding top or bottom*/

.remove-pad-top {
    padding-top: 0 !important;
}

.remove-pad-bottom {
    padding-bottom: 0 !important;
}


/* Remove element margin */

.remove-margin-top {
    margin-top: 0 !important;
}

.remove-margin-bottom {
    margin-bottom: 0 !important;
}


/* TEXT ---------------------------------*/


/* headings font family*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.2em;
    margin-bottom: 15px !important;
}


/* headings color */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #202020;
}


/* headings color on dark backgrounds */

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #F0F0F0;
}


/* h1 font size for smaller devices */

h1 {
    font-size: calc(20px + 2vw)!important;
}


/* h1 font size for tablet and desktop */

@media (min-width: 1024px) {
    h1 {
        font-size: 35px !important;
    }
}

@media (max-width: 767px) {
    .slidertextstyl h1 {
        font-size: 28px !important;
        line-height: 40px !important;
    }
}


/* h2 font size for smaller devices */

h2 {
    font-size: calc(20px + 1vw)!important;
}


/* h2 font size for tablet and desktop */

@media (min-width: 1024px) {
    h2 {
        font-size: 30px !important;
    }
}


/* h3 font size for smaller devices */

h3 {
    font-size: calc(19px + 1vw)!important;
}


/* h3 font size for tablet and desktop */

@media (min-width: 1024px) {
    h3 {
        font-size: 24px !important;
    }
}


/* paragraph font family and size */

p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.9em;
}


/* paragraph and list color */

p,
li {
    color: #4c4c4c;
    font-weight: 500;
}


/* paragraph and list color on dark backgrounds */

.dark p,
.dark li {
    color: #F8F8F8;
    font-weight: 500;
}


/* BUTTON ---------------------------------*/


/* Remove default button style*/

.vc_btn3.vc_btn3-style-modern {
    background-image: none !important;
    background-repeat: none;
}

@media only screen and (min-width: 768px) {
    .button-flat a.button:after,
    .button-flat button:after {
        background: rgba(0, 0, 0, .0);
    }
}


/* Buttons style */

.btn>.vc_btn3,
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_page_footer input.button,
.gform_wrapper .gform_page_footer input[type=submit] {
    padding: 14px 20px;
    font-size: 14px;
    border-radius: 0;
    letter-spacing: 0;
    text-transform: initial;
    border: 0px solid transparent;
    margin-top: 20px;
}


/* form button */

.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_page_footer input.button,
.gform_wrapper .gform_page_footer input[type=submit] {
    background-color: #101010 !important;
    color: #F8F8F8 !important;
    border: 0px solid transparent !important;
}


/* form button */

.gform_wrapper .gform_footer input.button:hover,
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform_page_footer input.button:hover,
.gform_wrapper .gform_page_footer input[type=submit]:hover {
    background-color: #282828 !important;
}


/* Button one */

.btn.btn-one>.vc_btn3 {
    background: transparent !important;
    border: 1px solid #0201f0!important;
    color: #0201f0 !important;
    font-weight: 600 !important;
}


/* Button one > hover */

.btn.btn-one>.vc_btn3:hover {
    background: #0201f0!important;
    color: #ffffff !important;
}


/* Button one > dark backgrounds > add class btn-dark*/

.btn.btn-one.btn-dark>.vc_btn3 {
    background-color: #C0C0C0 !important;
    color: #181818 !important;
}


/* Button one > dark backgrounds > hover*/

.btn.btn-one.btn-dark:hover>.vc_btn3 {
    background-color: #808080 !important;
}


/* Button two */

.btn-two>.vc_btn3 {
    background-color: #444 !important;
    color: #F8F8F8 !important;
    border: 0px solid transparent !important;
    font-weight: 600 !important;
}


/* Button two> hover */

.btn.btn-two:hover>.vc_btn3 {
    background-color: #282828 !important;
}


/* Button two > dark backgrounds > add class btn-dark*/

.btn-two>.vc_btn3 {
    background: transparent !important;
    border: 1px solid #fff !important;
}


/* Button two > dark backgrounds > hover*/

.btn.btn-two:hover>.vc_btn3:hover {
    background: #fff !important;
    color: #212121 !important;
}


/* Button three */

.btn.btn-three>.vc_btn3 {
    background-color: #101010 !important;
    color: #F8F8F8 !important;
    border: 0px solid transparent !important;
}


/* Button three > hover */

.btn.btn-three:hover>.vc_btn3 {
    background-color: #282828 !important;
}


/* Button three > dark backgrounds > add class btn-dark*/

.btn.btn-three.btn-dark>.vc_btn3 {
    background-color: #C0C0C0 !important;
    color: #181818 !important;
}


/* Button three > dark backgrounds > hover*/

.btn.btn-three.btn-dark:hover>.vc_btn3 {
    background-color: #808080 !important;
}


/* Add margin to footer and back to top button so CTA doesn't cover them */

@media screen and (max-width:640px) {
    footer,
    a#back_to_top {
        margin-bottom: 40px;
    }
}


/* COLUMNS */


/* column full width on tablet */

@media (max-width: 1023px) {
    .full-width-tablet .wpb_column {
        width: 100%;
    }
    /*.bg-img {
	display: none !important;
}*/
    .bg-img-col .vc_column-inner {
        min-height: 15rem;
    }
    .bg-img-col .usp.usp-three .vc_column-inner {
        min-height: auto !important;
    }
    .bg-img-col .usp .vc_column-inner {
        min-height: auto !important;
    }
}


/* minimum height for columns with a background image */

.bg-img-col .vc_column-inner {
    background-size: cover !important;
    background-position: 50% 50%;
}


/* background for columns with text */

.bg-text-col {
    background-color: whitesmoke;
}


/* REVERSE */


/* reverse columns on tablet */

@media (max-width: 1023px) {
    .reverse-tablet {
        /* Safari */
        /* Safari 6.1+ */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}


/* reverse columns on mobile */

@media (max-width: 768px) {
    .reverse-mobile {
        /* Safari */
        /* Safari 6.1+ */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}


/* VISIBILITY */


/* hide elements from small screens on*/

@media (max-width: 1240px) {
    .hidden-sm-screen {
        display: none !important;
    }
}


/* hide elements from tablet on */

@media (max-width: 1024px) {
    .hidden-tablet {
        display: none !important;
    }
}


/* hide elements from mobile on */

@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
}


/* hide elements from small mobile on */

@media (max-width: 480px) {
    .hidden-sm-device {
        display: none !important;
    }
}


/* BACKGROUND POSITION */

.bg-0 {
    background-position: 50% 0% !important;
}

.bg-20 {
    background-position: 50% 20% !important;
}

.bg-40 {
    background-position: 50% 40% !important;
}

.bg-60 {
    background-position: 50% 60% !important;
}

.bg-80 {
    background-position: 50% 80% !important;
}

.bg-100 {
    background-position: 50% 100% !important;
}


/* OVERLAY ROWS */

.vc_row.overlay-one-row::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.15+100 */
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.15)));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#26ffffff', GradientType=1);
    /* IE6-9 */
}


/* OVERLAY COLUMNS */

.overlay-one-col .vc_column-inner::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.15+100 */
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.15)));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#26ffffff', GradientType=1);
    /* IE6-9 */
    z-index: -1;
}


/* OVERFLOW */


/*make overflow elements in a row visible*/

.overflow.vc_row,
.overflow.vc_row[data-vc-full-width] {
    overflow: visible;
}


/* NEGATIVE MARGIN */

@media only screen and (min-width: 1024px) {
    .neg-top {
        margin-top: -120px;
    }
    .neg-bottom {
        margin-bottom: -120px;
    }
    .neg-left {
        margin-left: -120px;
    }
    .neg-right {
        margin-right: -120px;
    }
}


/* END GENERAL CSS ---------------------------------------------------------***/


/* HERO SECTION GENERAL ------------------------------------------------------*/


/* change the background size for home and internal hero */

.hero {
    background-size: cover !important;
}


/* background color of hero inner column */

.hero .hero-col .vc_column-inner {
    background-color: white;
}


/* add side padding when row and content are stretched */

.hero[data-vc-stretch-content],
.hero.homepage[data-vc-stretch-content] {
    padding-right: 5%;
    padding-left: 5%;
}

.vc_row-has-fill+.vc_row-full-width+.vc_row.hero>.vc_column_container.hero-col>.vc_column-inner {
    padding: 8% 8%;
}


/* inner padding of homepage hero column */

.hero.homepage .hero-col .vc_column-inner {
    padding: 8% 8%;
}


/* titles follow the alignment set to the section */

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6 {
    text-align: inherit !important;
}

@media (max-width: 768px) {
    .hero {
        text-align: center !important;
    }
}


/*--- HERO SIX ---*/


/* set a minimum height for the hero image in the homepage */

@media (min-width: 1440px) {
    .homepage.hero.hero-six-bg {
        min-height: 60vh;
    }
}


/* set a minimum height for the hero image in the homepage */

.hero.hero-six-bg {
    min-height: 60vh;
    background-position: 50% 50%;
}

.inner-hero-bg.homepage.hero.hero-six-bg {
    min-height: 52vh;
}

.homepage.hero.hero-six-bg {
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
}


/* column negative margin */

.hero.hero-six .hero-col .vc_column-inner {
    margin-top: -120px;
    padding: 8% 8% 8% 8% !important;
}


/* element alignment and row padding */

.hero.hero-six {
    text-align: center !important;
    padding-top: 0 !important;
    padding-bottom: 8% !important;
}


/* set a max width for the column */

@media (min-width: 769px) {
    .hero.hero-six .vc_column-inner {
        max-width: 100%;
        margin: auto;
    }
}


/* column expand to 100% width on tablet */

@media (max-width: 1024px) {
    .hero.hero-six .wpb_column {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .hero.hero-six-bg {
        min-height: 48vh;
    }
}


/* TEXT AND IMAGE SECTION GENERAL --------------------------------------------*/


/*--- TEXT & IMAGE SECTION ONE---*/

.text-img-one {}


/* CTA GENERAL --------------------------------------------------------------*/


/* style the text of the cta > use a paragraph*/

.cta .wpb_text_column p {
    font-size: 24px!important;
    line-height: 34px;
    color: #fff;
    font-weight: 400;
}

.cta .pad-md-col.vc_col-sm-3>.vc_column-inner {
    padding-bottom: 0 !important;
    position: relative;
    top: 20px;
}

.cta-four .wpb_column:nth-child(2) .vc_column-inner {
    padding-bottom: 10% !important;
    padding-top: 6% !important;
}


/* use this class to hightlight text in the cta, the phone number for example*/

.cta .cta-highlight {
    margin-top: 25px;
    font-size: 1.4em;
    letter-spacing: 0.08em;
}


/*--- CTA FOUR ---*/


/* content alignment */

.cta-four {
    text-align: left !important;
}


/* column background color */

.cta.cta-four .wpb_column {}

.cta-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

a.ph-num {
    font-weight: 600;
    color: #0201f0;
    font-size: 40px;
    margin: 30px 0 0 !important;
    display: block;
    background: url(https://www.hartelectrical.co.uk/wp-content/uploads/2019/06/cta-call.png);
    background-position: 0px 4px;
    background-repeat: no-repeat;
    padding-left: 46px;
    padding: 8px 0 12px 56px;
    letter-spacing: 1px;
}


/* image margin */

.cta-four .wpb_single_image {
    margin-bottom: 25px !important;
}


/*center align icon */

.cta-four .wpb_single_image.vc_align_left {
    text-align: center !important;
    margin-bottom: 0px !important;
}

a.ph-num:hover {
    opacity: 0.7;
}

.cta::after {
    background: url(https://www.hartelectrical.co.uk/wp-content/uploads/2019/06/brand-icon-bg.png) !important;
    content: "";
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
}


/*center align all the elements on mobile and makes the padding from the elements stack correctly */

@media (max-width: 767px) {
    .cta-four {
        text-align: center !important;
    }
    .cta-col {
        display: none !important;
    }
    .cta-four .wpb_column:nth-child(1) .vc_column-inner {
        padding-bottom: 0 !important;
    }
    .cta-four .wpb_column:nth-child(2) .vc_column-inner {
        padding-top: 0 !important;
    }
    .hero.hero-six-bg.banner-two {
    background-position: 90% !important;
}
}


/* remove padding left on the second column in desktop*/

@media (min-width: 769px) {
    .cta-four .wpb_column:nth-child(2) .vc_column-inner {
        padding-left: 0 !important;
    }
}


/* USP GENERAL ---------------------------------------------------------------*/

.usp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}


/* USP GENERAL ---------------------------------------------------------------*/

.usp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}


/* columns start stacking on small screens */

@media (max-width: 1240px) {
    .usp {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }
}


/* columns expand to 100% on mobile */

@media (max-width: 600px) {
    .usp .wpb_column.vc_column_container {
        -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    }
}


/* column padding */

.usp .vc_column-inner {
    padding: 10% !important;
}


/* column max-width - please only change the margin and adjust the flex-basis so the total is always 50 */

.usp .wpb_column.vc_column_container {
    width: 0;
    -ms-flex-preferred-size: 49%;
    flex-basis: 49%;
    margin: 0.5%;
}

.usp.usp-three-col .wpb_column.vc_column_container:first-child {
    margin-top: 13px;
}


/* use when you have 3 columns - please only change the margin and adjust the flex-basis so the total is always 33 */

.usp.usp-three-col .wpb_column.vc_column_container {
    -ms-flex-preferred-size: 32% !important;
    flex-basis: 32% !important;
    margin: 0.5%;
}


/* change columns padding when they jump on 2 columns*/

@media (max-width: 1239px) {
    .usp .vc_column-inner {
        padding: 3% !important;
    }
}


/* columns expand to 100% on mobile */

@media (max-width: 650px) {
    .usp.usp-three-col .wpb_column.vc_column_container {
        -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    }
}


/* center align content and image */

.usp,
.usp .wpb_single_image.vc_align_left {
    text-align: center !important;
}


/* add margin bottom to icon image */

.usp .wpb_single_image img {
    margin-bottom: 15px;
    max-width: 70% !important;
}


/* style the titles */

.usp-title p {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.4em;
    letter-spacing: 0.02em;
    margin-bottom: 15px !important;
}


/* USP ONE ------------------------------------------------------------------*/


/* add a background color to the columns */

.usp.usp-one .wpb_column.vc_column_container {
    background-color: transparent;
}


/* columns start stacking on small screens */

@media (max-width: 1240px) {
    .usp {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }
}


/* columns expand to 100% on mobile */

@media (max-width: 600px) {
    .usp .wpb_column.vc_column_container {
        -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    }
}


/* column padding */

.usp .vc_column-inner {
    padding: 0 10% !important;
}


/* column max-width - please only change the margin and adjust the flex-basis so the total is always 50 */

.usp .wpb_column.vc_column_container {
    width: 0;
    -ms-flex-preferred-size: 49%;
    flex-basis: 49%;
    margin: 0.5%;
}


/* use when you have 3 columns - please only change the margin and adjust the flex-basis so the total is always 33 */

.usp.usp-three-col .wpb_column.vc_column_container {
    -ms-flex-preferred-size: 32% !important;
    flex-basis: 32% !important;
    margin: 0.5%;
}


/* change columns padding when they jump on 2 columns*/

@media (max-width: 1239px) {
    .usp .vc_column-inner {
        padding: 3% !important;
    }
}


/* columns expand to 100% on mobile */

@media (max-width: 650px) {
    .usp.usp-three-col .wpb_column.vc_column_container {
        -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    }
}


/* center align content and image */

.usp,
.usp .wpb_single_image.vc_align_left {
    text-align: center !important;
}


/* add margin bottom to icon image */

.usp .wpb_single_image img {
    margin-bottom: 15px;
}


/* style the titles */

.usp-title p {
    text-transform: capitalize;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 0px !important;
}


/* USP ONE ------------------------------------------------------------------*/


/* add a background color to the columns */

.usp.usp-one .wpb_column.vc_column_container {
    background-color: transparent;
}


/* PODS GENERAL --------------------------------------------------------------*/

.pods {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}


/* columns start stacking on small screens */

@media (max-width: 1240px) {
    .pods {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }
}

@media (min-width: 1500px) {
    .pods .wpb_column.vc_column_container {
        margin: 0 40px !important;
    }
    .pods.ipods8 .wpb_column.vc_column_container {
        margin: 15px 10px !important;
    }
}


/* columns expand to 100% on mobile */

@media (max-width: 600px) {
    .pods .wpb_column.vc_column_container {
        -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    }
    .pods.pods-six .wpb_column.vc_column_container {
        margin: 10px;
    }
}


/* column max-width - please only change the margin between the columns and adjust the flex-basis so the total is always 50 */

.pods .wpb_column.vc_column_container {
    width: 0;
    -ms-flex-preferred-size: calc(50% - 20px);
    flex-basis: calc(50% - 20px);
    margin: 0 10px;
}


/* use this class when you have 3 pods to adjust the responsive - please only change the margin between the columns and adjust the flex-basis so the total is always 33 */

.pods.pods-three-col .wpb_column.vc_column_container {
    -ms-flex-preferred-size: calc(33.333% - 20px);
    flex-basis: calc(33.333% - 20px);
    margin: 10px;
}

.pods.pods-three-col {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}


/* columns expand to 100% on mobile */

@media (max-width: 680px) {
    .pods.pods-three-col .wpb_column.vc_column_container {
        -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    }
}


/* add margin bottom to icon image */

.pods .wpb_single_image img {
    margin-bottom: 15px;
}


/* style the titles */

.pod-title p {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.4em;
    letter-spacing: 0.02em;
    margin-bottom: 15px !important;
}

.ipods8 .pod-title p {
    letter-spacing: 0.00em;
    line-height: 1.4em !important;
}


/* style the paragraph */

.pods .wpb_text_column p {
    margin-bottom: 15px !important;
}


/* style the button - if left empty it inherits the style of button one */

.pods .btn.btn-one>.vc_btn3 {
    margin-top: 0 !important;
}


/* link expands to cover the content of the column */

a.pod-link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
}


/* button align to the bottom */

.pods .wpb_column.vc_column_container .vc_column-inner {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 100%;
}

.pods .wpb_column.vc_column_container .vc_column-inner .wpb_wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    height: 100%;
    width: 100%;
}


/*align button to bottom of pod*/

.vc_row.wpb_row.vc_row-fluid.pods .vc_btn3-container {
    margin-top: auto;
}


/* PODS SIX ------------------------------------------------------------------*/


/* when we want to use a background image below the pods and a title we need to nest the pods row in a container */

.pods-container {
    background-size: cover;
    background-position: 50% 50%;
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 25%, rgba(245, 245, 254, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 25%, rgba(245, 245, 254, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 25%, rgba(245, 245, 254, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5fe', GradientType=0);
    /* IE6-9 */
}

.pods-container .wpb_text_column.wpb_content_element {
    text-align: center;
    max-width: 750px;
    margin: auto;
}


/* margin between title and inner row with pods */

.pods-container>.wpb_column:first-child {
    margin-bottom: 0%;
}


/* column background color */

.pods.pods-six .wpb_column.vc_column_container {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


/* columns padding */

.pods.pods-six .vc_column-inner {
    padding: 8% !important;
}


/* center align content and image */

.pods.pods-six,
.pods.pods-six .wpb_single_image.vc_align_left {
    text-align: center !important;
}


/* HOVER EFFECT */


/* change background color on hover*/

.pods.pods-six .wpb_column.vc_column_container:hover {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    /* transition: all .5s ease-in-out; */
    -webkit-box-shadow: 6px 14px 34px -5px rgba(168, 168, 168, 1);
    -moz-box-shadow: 6px 14px 34px -5px rgba(168, 168, 168, 1);
    box-shadow: 6px 14px 34px -5px rgba(168, 168, 168, 1);
}


/* change text color on hovre*/

.pods.pods-six .wpb_column:hover .pod-title p,
.pods.pods-six .wpb_column:hover .wpb_text_column p {
    z-index: 2;
    position: relative;
}


/* change button color */

.pods.pods-six .wpb_column:hover .btn.btn-one>.vc_btn3,
.pods.pods-six .wpb_column:hover .btn>.vc_btn3:hover {
    background-color: #404040 !important;
}

.pod-title p {
    text-transform: capitalize !important;
    font-family: "Georgia";
    color: #212121;
    font-weight: 500;
}


/** Custom CSS **/


/** Mobile Icon **/

.ast-menu-toggle {
    top: 7px !important;
}

.vc_btn3-container.vc_btn3-left {
    display: table;
}

#cookie-notice .cn-button {
    font-family: "Montserrat";
}


/** Hero Title **/

.hero.hero-six .remove-pad-col-bottom .vc_column-inner {
    padding-bottom: 0 !important;
}

.inner-page-banner h1 {
    margin-bottom: 0 !important;
    color: #ffff;
    text-transform: uppercase !important;
}


/** Form **/

textarea.large {
    height: 100px !important;
}

.gform_footer.top_label {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.gform_wrapper label.gfield_label,
.gform_wrapper legend.gfield_label {
    font-weight: 500;
}


/** CTA **/

body .cta {
    background: linear-gradient(218deg, rgb(191, 35, 65), rgb(30, 6, 214)) 0% 0% / 200% 200% !important;
    animation: 30s ease 0s infinite normal none running CTAAnimation;
}

@-webkit-keyframes CTAAnimation {
    0% {
        background-position: 0% 72%
    }
    50% {
        background-position: 100% 29%
    }
    100% {
        background-position: 0% 72%
    }
}

@-moz-keyframes CTAAnimation {
    0% {
        background-position: 0% 72%
    }
    50% {
        background-position: 100% 29%
    }
    100% {
        background-position: 0% 72%
    }
}

@-o-keyframes CTAAnimation {
    0% {
        background-position: 0% 72%
    }
    50% {
        background-position: 100% 29%
    }
    100% {
        background-position: 0% 72%
    }
}

@keyframes CTAAnimation {
    0% {
        background-position: 0% 72%
    }
    50% {
        background-position: 100% 29%
    }
    100% {
        background-position: 0% 72%
    }
}


/** Row Six **/

.hero.hero-six.row-six .vc_column-inner {
    padding-bottom: 0 !important;
}

.row-six p,
.row-six h2 {
    text-align: left !important;
}

@media screen and (min-width: 1300px) and (max-width: 1600px) {
    .main-header-bar .ast-container,
    #masthead .ast-container {
        padding-left: 45px;
        padding-right: 45px;
    }
}


/** Footer **/

@media (min-width: 990px) {
    .ast-row .footer-adv-widget:first-child {
        width: 33.33%;
    }
    .ast-row>.ast-col-md-6:last-child {
        width: 66%;
    }
    .ast-col-lg-6 .ast-row .ast-col-lg-6 {
        width: 50%;
    }
    h2.widget-title {
        font-size: 20px !important;
    }
    .footer-adv-widget-1>div {
        display: inline-block;
        float: left;
        margin-bottom: 40px !important;
    }
    .footer-adv-widget-1 {
        width: 100% !important;
        border-bottom: 1px solid #e5e5e5;
    }
    .footer-adv-widget-1>div:last-child {
        float: right;
    }
    .ast-container>.ast-row:last-child {
        padding-top: 40px;
    }
}

#ast-scroll-top {
    bottom: 150px !important;
}

.social-media-icons {
    margin-top: 17px;
}

a.social-icon {
    border: 1px solid #000;
    height: 55px;
    width: 55px;
    border-radius: 100%;
    display: inline-block;
    line-height: 55px;
    font-size: 26px;
    margin: 0 10px;
}

a.social-icon.facebook,
a.social-icon.facebook:hover {
    color: #3c599a !important;
    border-color: #3c599a !important;
}

a.social-icon.twitter,
a.social-icon.twitter:hover {
    color: #0099dc!important;
    border-color: #0099dc!important;
}

.phn-email p {
    padding-bottom: 10px;
}

.phn-email p:last-child {
    padding-bottom: 0;
}

.fa-facebook-f:before {
    content: "\f39e" !important;
}

.footer-desc i {
    color: #ce2633;
    font-size: 22px;
    padding-right: 5px;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    top: 5px;
}

.footer-adv a {
    color: #4c4c4c !important;
}

.footer-adv a:hover {
    color: #0201f0 !important;
}

a.social-icon:hover {
    opacity: 0.8 !important;
}

footer span {
    display: inline-block;
    /*width: 89%; */
}

.main-header-menu a {
    padding-left: 14px !important;
    padding-right: 14px !important;
}


/** Media Query **/

@media (max-width: 1410px) {
    .main-header-bar .ast-container,
    #masthead .ast-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .main-header-menu a {
        padding: 9px 9px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .cta-four .wpb_column:nth-child(2) .vc_column-inner {
        padding-top: 4% !important;
    }
    .ast-button-wrap .menu-toggle .menu-toggle-icon {
        line-height: 0px;
    }
    footer .ast-col-lg-6 {
        width: 100%;
    }
    footer {
        text-align: center;
    }
    footer span {
        display: initial;
    }
    .footer-desc i {
        display: block;
        margin-bottom: 10px;
    }
    div#custom_html-3 {
        margin-bottom: 20px;
    }
    .footer-adv-widget-3 .widget {
        margin-bottom: 20px !important;
    }
    a.social-icon {
        height: 40px;
        width: 40px;
        line-height: 40px;
        font-size: 20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
    .pods .wpb_column.vc_column_container {
        margin: 10px !important;
        margin-bottom: 20px!important;
    }
}

@media (max-width: 767px) {
    /** Pods **/
    .usps-wrap.pad-md {
        padding-top: 0;
    }
    .usp .wpb_single_image img {
        max-width: 70%;
    }
    .pods .wpb_column.vc_column_container {
        margin-bottom: 20px!important;
    }
    .pods .wpb_column.vc_column_container:last-child {
        margin-bottom: 0 !important;
    }
    .client-logos .wpb_column.vc_column_container.vc_col-sm-3 {
        margin-bottom: 30px;
    }
    .client-logos .wpb_column.vc_column_container.vc_col-sm-3:last-child {
        margin-bottom: 0;
    }
    /** CTA **/
    .cta {
        display: none !important;
    }
    /** Disable Animation **/
    .wpb_animate_when_almost_visible {
        opacity: 1 !important;
        filter: alpha(opacity=100);
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none;
        animation: none !important;
        animation-name: unset !important;
    }
    /** Footer **/
    footer {
        text-align: center;
    }
    .footer-adv-overlay {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    footer span {
        display: initial;
    }
    .footer-desc i {
        display: block;
        margin-bottom: 10px;
    }
    div#custom_html-3 {
        margin-bottom: 20px;
    }
    .footer-adv-widget-3 .widget {
        margin-bottom: 20px !important;
    }
    a.social-icon {
        height: 40px;
        width: 40px;
        line-height: 40px;
        font-size: 20px;
    }
}


/** CTA Button **/

a.float-standard {
    position: fixed;
    right: 20px;
    bottom: 75px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 99;
    height: 30px;
    padding: 25px 30px;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    text-decoration: none;
    border-color: #ce2633;
    color: #fff !important;
    border-radius: 50px;
    background-color: #ce2633;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 500;
    font-size: 20px;
}

footer .float-standard:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #ce2633;
    -webkit-box-shadow: 0 5px 20px 1px rgba(0, 0, 0, .22);
    box-shadow: 0 5px 20px 1px rgba(0, 0, 0, .22);
    color: #fff !important;
}


/* Icon settings - remove if not needed*/

.float-standard.icon i {
    margin-right: 8px;
    margin-top: 5px;
}


/* Media queries */

@media screen and (max-width:767px) {
    a.float-standard {
        right: 0px;
        bottom: 0px;
        width: 100%;
        border-radius: 0px;
        padding: 20px 5px;
    }
}


/* Hero Images Changes */

img#n2-ss-2item2 {
    width: 200px !important;
    position: absolute;
    left: 10px;
}

@media screen and (min-width: 1280px) {
    img#n2-ss-2item2 {
        top: -50px;
    }
}

@media screen and (min-width:1440px) {
    img#n2-ss-2item2 {
        top: -70px;
    }
}

@media screen and (min-width:1600px) {
    img#n2-ss-2item2 {
        left: 0px;
        top: -90px;
    }
}

@media screen and (min-width:1700px) {
    img#n2-ss-2item2 {
        top: -110px;
    }
}

@media screen and (min-width:1800px) {
    img#n2-ss-2item2 {
        top: -130px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1279px) {
    img#n2-ss-2item2 {
        top: -20px;
        width: 150px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    img#n2-ss-2item2 {
        top: 0px;
        width: 150px !important;
    }
}

@media screen and (max-width: 767px) {
    img#n2-ss-2item2 {
        top: inherit;
        position: relative;
        width: 150px !important;
    }
}

.slidertextstyl h2 {
    color: #fff;
    text-transform: uppercase;
}

.list ul {
    margin: 0;
}

.list li {
    list-style: none;
    background-image: url("https://www.hartelectrical.co.uk/wp-content/uploads/2019/08/list-icon.png");
    background-repeat: no-repeat;
    padding: 0px 0 16px 30px;
    background-size: 15px;
    background-position: 0 3px;
    font-weight: 500;
}

.pods.ipods8 .wpb_column.vc_column_container {
    width: 0;
    -ms-flex-preferred-size: calc(25% - 22px)!important;
    flex-basis: calc(25% - 22px)!important;
    margin: 15px 10px !important;
}

.pods.ipods8 {
    flex-wrap: wrap !important;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .pods.ipods8 .wpb_column.vc_column_container {
        width: 0;
        -ms-flex-preferred-size: calc(50% - 20px) !important;
        flex-basis: calc(50% - 20px) !important;
        margin: 15px 10px !important;
    }
}

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .pods.ipods8 .wpb_column.vc_column_container {
        width: 0;
        -ms-flex-preferred-size: calc(100% - 20px) !important;
        flex-basis: calc(100% - 20px) !important;
        margin: 15px 10px !important;
    }
    .list li {
        background-size: 25px;
        font-size: 16px !important;
    }
}


/* TEXT SECTION GENERAL ------------------------------------------------------*/


/*Divide text in 2 columns */

@media (min-width: 768px) {
    .text-two-col {
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 30px;
        column-gap: 30px;
        text-align: left;
    }
}


/* New Styles */

.footer-adv-widget-1>div:nth-child(2) {
    display: none !important;
}

.page-id-44 .footer-adv-widget-1>div:nth-child(2) {
    display: inline !important;
    max-width: 770px;
    text-align: left;
    padding-left: 3%;
    padding-right: 3%;
}

.page-id-44 .footer-adv-widget-1 {
    display: flex;
    align-items: center;
}

.page-id-44 .footer-adv-layout-7 .footer-adv-widget-1 .widget:last-child {
    margin: 0 !important;
}

.page-id-44 .social-media-icons {
    margin-top: 0px;
}

.page-id-44 .footer-adv-widget-1>div {
    margin-bottom: 0px !important;
}

.page-id-44 .ast-container>.ast-row:first-child {
    padding-bottom: 40px;
}
.client-logos .wpb_single_image.vc_align_center {
    display: inline-block !important;
}