Untitled

avatar
unknown
plain_text
3 years ago
11 kB
6
Indexable
/*********************************** Variation 1  ******************************* /

div.eg-usp {
    margin-top: 30px;
    width: max-content;
}

div.eg-usp ul li {
    display: flex;
    color: white;
    gap: 12px;
    text-align: justify;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 500;
    align-items: center;
}

div.eg-usp ul li .eg-check-icon {
    display: grid;
    place-items: center;
}

div.eg-usp ul li+li {
    margin-top: 8px;
}

div.eg-usp svg {
    fill: #008ad3;
}

.heading-content {
    text-align: center;
    max-width: 644px;
}

.heading-container .heading-content>h1 {
    font-size: 46px;
    margin-top: 36px;
}


.heading-container .heading-content #tandc30 {
    font-size: 13px;
}

@media screen and (max-width:1200px){
    div.eg-usp {
        width: 100%;
    }
}

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

    div.eg-usp {
        margin-inline: 20px;
        max-width: fit-content;
        width: 100%;
    }

    div.eg-usp ul li {
        gap: 22px;
    }

    .header-wrapper {
        background: url(https://www.equifax.co.uk/bubble/images/equifax-member-centre-blend.jpg) !important;
        background-position: left !important;
        background-size: cover !important;
        /* background-color: rgba(0,0,0,0.5);
        background-blend-mode: overlay; */
    }

    .heading-container .heading-content>h1 {
        margin-top:0;
    }

    .heading-content {
        background: none;
    }
    
    h1.title ,
    .heading-content p {
        color: #fff !important;
    }
    
    div.header-wrapper > div.heading-container.universal-wrapper > div.wave-layer-M > img {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    .heading-container {
        padding: 0px 10px;
    }
}







/******************************************  Variation 2 ********************************************/



/*already exists caraousel*/

.carousel-wrapper {
    padding-top: 30px;
    padding-inline: 8%;
}

.carousel {
    height: 340px !important;
    padding-top: 0;
}

li#carousel__slide3 {
    order: 4;
}

/*hiding big left right buttons*/
.carousel::before,
.carousel::after {
    display: none;
}

.eg-image-desc {
    display: block !important;
    font-weight: 600;
    line-height: 1.6;
}

.carousel .hp-grid-child>* {
    display: none;
}

.carousel .hp-grid-parent {
    display: flex !important;
    flex-direction: column;
    padding: 0;
}

.carousel-icon {
    order: -1;
    margin-top: 0;
}

.carousel-icon img {
    width: 150px;
    height: 150px;
}


/*video block*/

.video-block-container p.info-block-p {
    padding-bottom: 0;
}

.video-block-container a.cta-x {
    font-size: 17px;
    padding-block: 6px !important;
    margin-block: 20px;
}

.video-block-container p#tandc30 br {
    display: none;
}

.video-block-container p#tandc30 {
    font-size: 14px;
}

.video-block-container .hp-grid-child{
    order: -1;
}
#video-top-img iframe {
     border-bottom: none !important; 
}
div.eg-usp {
    margin-top: 5px;
    width: max-content;
}

div.eg-usp ul li {
    display: flex;
    color: #29343f;
    gap: 12px;
    text-align: justify;
    font-size: 16.3px;
    line-height: 1.3;
    font-weight: 600;
    align-items: center;
}

div.eg-usp ul li .eg-check-icon {
    display: grid;
    place-items: center;
}

div.eg-usp svg {
    fill: #008ad3;
}

.video-block-container p.info-block-p+p {
    display: none;
}

@media screen and (max-width:1200px) {
    div.eg-usp {
        width: 100%;
    }
}

@media(max-width: 1086px){
    div.eg-usp ul{
        width: fit-content;
        margin-inline: auto;
    }
}

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

    div.eg-usp {
        margin-inline: 20px;
        max-width: fit-content;
        width: 100%;
    }

    div.eg-usp ul li {
        gap: 22px;
    }
}

/*video block end*/


@media(min-width:768px) {
    .carousel__viewport {
        justify-content:
            center;
        height: max-content;
        gap: 16px;
    }

    .carousel__slide {
        flex: 1;
        width:
            auto;
        height: max-content;
    }

    /*hiding navigation dots*/
    .carousel__navigation {
        display: none;
    }

    .carousel .hp-grid-child {
        margin-inline: 0 !important;
    }
}

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

    /*showing navigation dots*/
    .carousel__navigation {
        display: block;
        visibility: visible;
    }

    .carousel {
        height: 310px !important;
    }

    .carousel li.carousel__navigation-item+li {
        margin-left: 6px;
    }

    .header-wrapper {
        background: url(https://www.equifax.co.uk/bubble/images/equifax-member-centre-blend.jpg) !important;
        background-position: left !important;
        background-size: cover !important;
    }

    .heading-content {
        background: none;
    }
    
    h1.title ,
    .heading-content p {
        color: #fff !important;
    }
    
    div.header-wrapper > div.heading-container.universal-wrapper > div.wave-layer-M > img {
        display: none;
    }
}






/******************************************************* Variation 3 ****************************************/


/*hero section*/
.heading-container {
    min-height: 288px;
}

.heading-container .heading-content>h1 {
    font-size: 38px;
    margin-top: 35px;
}

.heading-container .heading-content #tandc30 {
    font-size: 13px;
}

/*hero section*/

.eg-video-carousel-wrapper .hp-grid-child {
    margin: 0 !important;
}

.eg-video-carousel-wrapper,
.eg-video-carousel-container {
    background: #f5f5f5;
}

.eg-video-carousel-wrapper {
    display: flex;
    max-width: 1300px;
    margin-inline: auto;
}

.eg-video-carousel-container {
    padding-top: 20px;
}

.eg-video-carousel-wrapper .video-block-container .hp-grid-parent {
    flex-direction: column;
}

.eg-video-carousel-wrapper>div {
    width: 50%;
    margin-top: -105px;
    background: transparent;
}

.eg-video-carousel-wrapper .title {
    font-size: 32px;
    font-weight: 700;
    font-family: system-ui;
}

/*video block*/

.eg-video-carousel-wrapper .video-block-container p.info-block-p {
    padding-bottom: 0;
}

.eg-video-carousel-wrapper .video-block-container a.cta-x {
    font-size: 17px;
    padding-block: 6px !important;
    margin-block: 20px;
}

.eg-video-carousel-wrapper .video-block-container p#tandc30 br {
    display: none;
}

.eg-video-carousel-wrapper .video-block-container p#tandc30 {
    font-size: 14px;
}



div.eg-usp {
    margin-top: 5px;
    width: max-content;
}

div.eg-usp ul li {
    display: flex;
    color: #29343f;
    gap: 12px;
    text-align: justify;
    font-size: 16.3px;
    line-height: 1.3;
    font-weight: 600;
    align-items: center;
}

div.eg-usp ul li .eg-check-icon {
    display: grid;
    place-items: center;
}

div.eg-usp svg {
    fill: #008ad3;
}

.eg-video-carousel-wrapper .video-block-container p.info-block-p+p {
    display: none;
}

@media screen and (max-width:1200px) {
    div.eg-usp {
        width: 100%;
    }

    .eg-video-carousel-container {
        opacity: 1;
        padding-top: 60px;
    }
}

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

    div.eg-usp {
        margin-inline: 20px;
        max-width: fit-content;
        width: 100%;
    }

    div.eg-usp ul li {
        gap: 22px;
    }
}

/*video block end*/

/*carousel start*/

/*already exists caraousel*/

/*hiding big left right buttons*/
.carousel::before,
.carousel::after {
    display: none;
}

.carousel {
    height: 583px !important;
}

.carousel .hp-grid-parent {
    display: flex !important;
    flex-direction: column;
}

/*changing order*/
.carousel-icon {
    order: -1;
    margin-top: 0;
}

/*changing image height*/
.carousel-icon img {
    width: 100%;
    height: 100%;
    max-width: 236px;
    max-height: 240px;
}

/*hiding buttons inside carousel*/
.eg-video-carousel-wrapper .carousel__viewport li a {
    display:
        none;
}

.eg-video-carousel-wrapper .carousel__viewport li .title {
    text-align: center !important;
}

.eg-video-carousel-wrapper .carousel__viewport li .hp-grid-child>* {
    display: none;
}

.eg-video-carousel-wrapper .carousel__viewport li .hp-grid-child .title,
.eg-video-carousel-wrapper .carousel__viewport li .hp-grid-child .sub-title,
.eg-video-carousel-wrapper .carousel__viewport li .hp-grid-child .sub-title+p {
    display: block !important;
}

.eg-video-carousel-wrapper .carousel__viewport li .hp-grid-child .sub-title {
    font-size: 17.4px;
}

.eg-video-carousel-wrapper .carousel__viewport li .hp-grid-child>* {
    text-align: left;
    padding-inline: 0;
}

/*showing navigation dots*/
.carousel__navigation {
    display: block;
    visibility: visible;
}

.carousel li.carousel__navigation-item+li {
    margin-left: 6px;
}

/*carousel end*/

@media(max-width: 1107px) {
    .carousel {
        height: 630px !important;
    }
}

@media(max-width: 1085px) {
    .carousel {
        height: 690px !important;
    }

    .eg-video-carousel-wrapper>div {
        margin-top: -130px;
    }

    .eg-video-carousel-wrapper .carousel .hp-grid-parent {
        padding-top: 80px !important;
    }
}

@media (max-width: 985px) {
    .carousel {
        height: 680px !important;
    }

    .carousel-icon img {
        max-width: 170px;
        max-height: 170px;
    }
}

@media(max-width: 767px) {
    .eg-video-carousel-wrapper .title {
        font-size: 30px;
    }

    .eg-video-carousel-wrapper .video-block-container p.info-block-p {
        font-size: 13.8px;
    }

    .heading-content {
        background: none;
    }
    
    h1.title ,
    .heading-content p {
        color: #fff !important;
    }
    
    div.header-wrapper > div.heading-container.universal-wrapper > div.wave-layer-M > img {
        display: none;
    }

.eg-video-carousel-container {
    opacity: 1;
    padding-top: 60px;
}

    .carousel {
        height: 640px !important;
    }

    .header-wrapper {
        background: url(https://www.equifax.co.uk/bubble/images/equifax-member-centre-blend.jpg) !important;
        background-position: left !important;
        background-position: cover !important;
    }

    .eg-video-carousel-wrapper {
        flex-direction: column;
    }

    .eg-video-carousel-wrapper>div {
        width: 100%;
    }

    .heading-container {
        min-height: 315px;
    }

    .eg-video-carousel-wrapper .carousel-wrapper {
        margin-top: 0;
    }

    .eg-video-carousel-wrapper .carousel .hp-grid-parent {
        padding-top: 30px !important;
    }
}

@media (max-width: 606px) {
    .heading-container {
        min-height: 370px;
    }
}

@media (max-width: 486px) {
    .heading-container {
        min-height: 400px;
        padding-top: 0 !important;
    }

    .header-wrapper {
        background-position: right;
    }
}

@media(max-width: 367px){
    .eg-video-carousel-wrapper .video-block-container p.info-block-p br{
        display: none;
    }
}
Editor is loading...