@charset "ISO-8859-1";

/******************************************************************************
* Header
******************************************************************************/

#recycling-header {
    background-color: #ffffff;
    color: #454545;
    background-image: url('https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/hero-desktop.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 280px;
}

body.webp #recycling-header {
    background-image: url('https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/hero-desktop.png');
}

#recycling-header .recycling-title-wrapper {
    /*min-height: 600px;*/
}



#recycling-header .recycling-text {
    font-family: 'Centrale Sans Regular', Trebuchet, sans-serif;
    font-size: 0.875rem;
}

#recycling-header .recycling-button {
    font-size: 0.875rem;
}

@media screen and (max-width: 767px) {
    #recycling-header {
        background-image: url('https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/hero-mobile.png');
        --image-width: 767;
        --image-height: 672;
        min-height: calc(100vw * var(--image-height) / var(--image-width));

    }

    body.webp #recycling-header {
        background-image: url('https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/hero-mobile.png');
    }

    #recycling-header .recycling-title {
        font-size: 4rem;

    }
}


/******************************************************************************
* Breadcrumbs - Custom Overrides
******************************************************************************/

.breadcrumbs li,
.breadcrumbs li a {
    color: #2D2D2D;
}

.breadcrumbs li.current,
.breadcrumbs li.current a {
    color: #2D2D2D;
}

.breadcrumbs li a:hover,
.breadcrumbs li.current a:hover {
    color: #2D2D2D;
}


html {
    scroll-behavior: smooth;
}

header .menu-line {
    border-bottom: 0px !important;
}

.main {
    background-color: white;
    overflow: hidden;
    color: #2d2d2d;
}

.main h1.heading {
    height: 0;
}

.heading {
    color: white;
    position: relative;
    top: -180px;
    font-size: 45px;
    margin-left: 0;
}

.cj-body-container h2.sub-heading {
    color: #ffffff;
    font-size: 34px;
    margin-left: 0;
}

h3.title {
    font-size: 28px;
    margin-left: 0;
    margin-bottom: 0.6rem;
}

h4.mini-title {
    font-size: 18px;
    margin-left: 0;
    margin-bottom: 0.6rem;
}

h4.phone-number a {
    color: #0099FF;
    font-size: 24px;
}

h1,
h2,
h3,
h4 {
    font-family: 'Centrale Sans Bold', Trebuchet, sans-serif;
}

h2 small {
    font-family: 'Centrale Sans Light', Trebuchet, sans-serif;
    font-size: 50%;
    line-height: 1.5em;
}

article p,
article li {
    font-size: 15px;
    line-height: 1.5em;
}

p {
    font-family: 'Centrale Sans Regular', Trebuchet, sans-serif;
}

p.text-lead {
    font-family: 'Centrale Sans Bold', Trebuchet, sans-serif;
    font-size: 20px;
    margin: 10px 0;
}

p.light,
li.light {
    font-family: 'Centrale Sans Light', Trebuchet, sans-serif;
    margin-bottom: 0.6rem;
}

li.bold {
    font-family: 'Centrale Sans Bold', Trebuchet, sans-serif;
}

.text-white {
    color: #ffffff;
}

.text-black {
    color: #2d2d2d;
}

.text-bold {
    font-weight: bold;
}

.btn-guides {
    color: #fff !important;
    background-color: #0099FF;
    border-color: #0099FF;
}

.btn-guides:hover,
.btn-guides:focus {
    color: #fff;
    background-color: #0077ff;
    border-color: #0077ff;
}

.btn-guides:active {
    color: #fff;
    background-color: #0077ff;
    border-color: #0077ff;
    background-image: none;
}

.btn-trustpilot {
    color: #fff !important;
    background-color: #00B67A;
    border-color: #00B67A;
}

.btn-trustpilot:hover,
.btn-trustpilot:focus {
    color: #fff;
    background-color: #00967A;
    border-color: #00967A;
}

.btn-trustpilot:active {
    color: #fff;
    background-color: #00967A;
    border-color: #00967A;
    background-image: none;
}

.cj-top-container {
    background-color: white;
    width: 100%;
    position: relative;
    /* margin-left: 50%; */
    /* transform: translateX(-50%); */
}

.cj-top-body-container {
    text-align: center;
    padding: 40px 0px;
    position: relative;
}

.cj-intro {
    text-align: center;
    max-width: 990px;
    margin: auto;
}

.cj-intro p.steps {
    font-weight: 700;
    line-height: 1.2em;
}

.cj-middle-container {
    background-color: #102A4B;
    width: 100%;
    position: relative;
    padding: 20px 0;
    /* margin-left: 50%; */
    /* transform: translateX(-50%); */
}

.breadcrumbs a:hover {
    color: #0099ff;
}

.breadcrumbs {
    margin-left: 0;
    margin-top: 0;
    font-size: 1.05em;
}

.cj-first {
    padding-top: 40px;
}

.cj-last {
    padding-bottom: 40px;
}

.cj-body-container {
    text-align: left;
    position: relative;
}

.cj-body-heading {
    text-align: left;
}

.cj-body-content {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

.cj-trustpilot-container {
    text-align: left;
    position: relative;
}

.buy-online {
    background: rgb(0, 153, 255);
    background: -moz-linear-gradient(180deg, rgba(0, 153, 255, 1) 0%, rgba(0, 119, 255, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0, 153, 255, 1) 0%, rgba(0, 119, 255, 1) 100%);
    background: linear-gradient(180deg, rgba(0, 153, 255, 1) 0%, rgba(0, 119, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0099ff", endColorstr="#0077ff", GradientType=1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 50px;
    height: 100%;
}

.buy-phone {
    background: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 50px;
    height: 100%;
}

.buying-guides {
    margin-top: 15px;
    background: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px 30px;
}

.buying-guides p {
    padding-right: 65px;
}

.phone-details {
    margin-top: 15px;
    background: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px 30px 20px 0;
}

.phone-details p {
    padding-right: 95px;
}

.img-abs {
    position: absolute;
    right: -15px;
    bottom: -15px;
}

.phone-details .img-abs {
    right: 0;
}

.service-options {
    background: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 30px 50px;
}

.service-options .service-item-row {
    display: flex;
}

.phone-purchase {
    background: #0099FF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px 30px;
    margin-bottom: 30px;
}

.basket-example {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.service-item-blue,
.service-item {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px 30px;
    margin-bottom: 10px;
    height: 100%;
    display: flex;
}

.service-item-blue .row,
.service-item .row {
    display: flex;
    align-items: center;
}

.service-item-blue {
    background-color: #0099FF;
}

.service-item {
    background-color: #F5F5F5;
}

.service-item-blue h4,
.service-item-blue p {
    color: #ffffff;
}

.service-item h4 {
    color: #0099FF;
}

.service-item p {
    color: #000000;
}

.payment-options {
    background: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 30px 50px;
}

.payment-methods,
.finance-options,
.pay-now {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px 0;
    margin-bottom: 20px;
}

.payment-methods ul.list-inline {
    display: flex;
    justify-content: space-between;
}

.payment-methods ul.list-inline li {
    padding: 10px;
}

.finance-options {
    padding-right: 30px;
}

.pay-now {
    padding-left: 30px;
}

.finance-options h4,
.pay-now h4 {
    color: #0099FF;
}

.booking-delivery {
    background: #0099FF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 30px 50px;
}

.booking-delivery .row {
    display: flex;
    align-items: center;
}

.delivery,
.installation {
    background: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 30px 50px;
}

.delivery .row,
.installation .row {
    display: flex;
    align-items: center;
}

.delivery h3,
.delivery h4,
.installation h3 {
    color: #0099FF;
}

.delivery-steps,
.installation-steps {
    background-color: #F5F5F5;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 30px 40px;
    margin: 20px 0;
}

.delivery-steps li,
.installation-steps li {
    position: relative;
    height: 100%;
}

.delivery-steps li::marker,
.installation-steps li::marker {
    color: #0099FF;
    content: counter(list-item) "  ";
    font-family: 'Centrale Sans Bold', Trebuchet, sans-serif;
    font-size: 18px;
}

.delivery-steps li:not(:last-child)::before,
.installation-steps li:not(:last-child)::before {
    content: '';
    border-left: 5px dotted #D6D6D6;
    margin-top: 25px;
    margin-left: -17px;
    width: 5px;
    height: calc(100% - 35px);
    display: block;
    position: absolute;
}

.delivery-steps li:not(:last-child),
.installation-steps li:not(:last-child) {
    padding-bottom: 20px;
}

.static .trustpilot {
    height: 368px;
    background-image: url("https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/trustpilot-section-desktop.png");
    background-image: url("https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/trustpilot-section-desktop.webp");
    background-repeat: no-repeat;
    background-position: center center;
}

.trustpilot-content {
    position: relative;
    top: 65px;
    padding-left: 50px;
}

.trustpilot-content h3 {
    padding: 20px 0;
}

.between-steps {
    border-top: 5px dotted #D6D6D6;
    margin-top: 30px;
}

.step-1 h2::before {
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-1.png);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-1.png) / 'Step 1';
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-1.webp);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-1.webp) / 'Step 1';
    display: block;
    width: 52px;
    height: 51px;
    position: absolute;
    top: -8px;
    left: -65px;
}

.step-1-details::before {
    content: '';
    border-left: 5px dotted #ffffff;
    margin-left: -42px;
    width: 5px;
    height: 100%;
    display: block;
    position: absolute;
}

.step-2 h2:not(.visible-xs)::before {
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-2.png);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-2.png) / 'Step 2';
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-2.webp);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-2.webp) / 'Step 2';
    display: block;
    width: 52px;
    height: 51px;
    position: absolute;
    top: -8px;
    left: -65px;
}

.step-2-details::before {
    content: '';
    border-left: 5px dotted #ffffff;
    margin-left: -42px;
    width: 5px;
    height: 100%;
    display: block;
    position: absolute;
}

.step-3 h2:not(.visible-xs)::before {
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-3.png);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-3.png) / 'Step 3';
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-3.webp);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-3.webp) / 'Step 3';
    display: block;
    width: 52px;
    height: 51px;
    position: absolute;
    top: -8px;
    left: -65px;
}

.step-3-details::before {
    content: '';
    border-left: 5px dotted #ffffff;
    margin-left: -42px;
    width: 5px;
    height: 100%;
    display: block;
    position: absolute;
}

.step-4 h2::before {
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-4.png);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-4.png) / 'Step 4';
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-4.webp);
    content: url(https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/step-4.webp) / 'Step 4';
    display: block;
    width: 52px;
    height: 51px;
    position: absolute;
    top: -8px;
    left: -65px;
}

@media screen and (max-width: 1320px) and (min-width: 768px) {
    .cj-body-container {
        padding-left: 65px;
    }

    .step-1 h2::before,
    .step-2 h2::before,
    .step-3 h2::before,
    .step-4 h2::before {
        left: 0 !important;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    .service-options .service-item-row {
        display: block;
    }

    .payment-methods ul.list-inline {
        display: block;
        justify-content: unset;
    }

    .delivery,
    .installation {
        text-align: center;
    }

    .delivery .visible-sm,
    .installation .visible-sm {
        margin-bottom: 15px;
    }

    .delivery .row,
    .installation .row {
        display: block;
    }

    .delivery-steps,
    .installation-steps {
        text-align: left;
    }

    .delivery-steps li,
    .installation-steps li {
        font-size: 18px;
    }

    .trustpilot {
        background-position-x: 40%;
    }
}

@media screen and (max-width: 767px) {
    h4.mini-title {
        font-size: 24px;
    }

    p.light,
    p.light a {
        font-size: 18px;
    }

    p.steps {
        font-family: 'Centrale Sans Bold', Trebuchet, sans-serif;
        font-size: 30px;
    }

    .cj-top-container {
        width: unset;
        position: unset;
        margin-left: unset;
        transform: unset;
    }

    .cj-intro p.intro-text {
        font-size: 20px;
        padding-bottom: 30px;
    }

    .cj-middle-container {
        width: unset;
        position: unset;
        margin-left: unset;
        transform: unset;
    }

    .cj-body-heading {
        text-align: center;
    }

    .cj-body-content {
        display: block;
    }

    .heading {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        margin: auto;
        width: 100vw;
        text-align: center;
        font-size: 50px;
        padding-left: 15%;
        padding-right: 15%;
    }

    .cj-body-container h2.sub-heading {
        font-size: 32px;
    }

    h2.visible-xs {
        padding: 0 15%;
    }

    .between-steps {
        border-top: unset;
        margin-top: unset;
        border-left: 5px dotted #D6D6D6;
        margin-left: calc(50% - 2px);
        height: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .step-1 h2::before,
    .step-2 h2:not(.visible-xs)::before,
    .step-3 h2:not(.visible-xs)::before,
    .step-4 h2::before {
        display: inline;
        position: relative;
        top: 12px;
        left: -12px;
    }

    .step-1-details::before,
    .step-2-details::before,
    .step-3-details::before {
        content: unset;
        border-left: unset;
        margin-left: unset;
        width: unset;
        height: unset;
        display: unset;
        position: unset;
    }

    .buy-online,
    .buy-phone {
        text-align: center;
        margin: 70px 0 20px;
    }

    .phone-details {
        padding: 0;
    }

    .buying-guides p,
    .phone-details p {
        padding-right: 0;
    }

    .img-abs-m {
        margin: -90px 0 30px;
    }

    .service-options .service-item-row {
        display: block;
    }

    .service-item-blue,
    .service-item {
        display: block;
        margin: 80px 0 20px;
        text-align: center;
    }

    .service-item-blue .row,
    .service-item .row {
        display: block;
    }

    .service-item-blue .service-icon,
    .service-item .service-icon {
        margin: -70px 0 10px;
    }

    .payment-options {
        text-align: center;
    }

    .payment-methods ul.list-inline {
        display: block;
        justify-content: unset;
    }

    .finance-options {
        padding-right: 0;
    }

    .pay-now {
        padding-left: 0;
    }

    .booking-delivery {
        text-align: center;
    }

    .booking-delivery .row {
        display: block;
    }

    .booking-icon {
        margin: 20px 0;
    }

    .delivery,
    .installation {
        text-align: center;
    }

    .delivery .visible-xs,
    .installation .visible-xs {
        margin-bottom: 15px;
    }

    .delivery .row,
    .installation .row {
        display: block;
    }

    .delivery-steps,
    .installation-steps {
        text-align: left;
    }

    .delivery-steps li,
    .installation-steps li {
        font-size: 18px;
    }

    .trustpilot {
        height: 680px;
        background-image: url("https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/trustpilot-section-mobile.png");
        background-image: url("https://s3.eu-west-1.amazonaws.com/media.markselectrical.co.uk/pages/customer-journey/trustpilot-section-mobile.webp");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .trustpilot-content {
        text-align: center;
        padding-left: 0;
    }
}

@media screen and (max-width: 370px) {
    .cj-body-container h2.sub-heading {
        font-size: 28px;
    }
}

@media screen and (max-width: 332px) {
    .cj-body-container h2.sub-heading {
        font-size: 24px;
    }
}