.grid .hero-carousel.bg-brand-colour2 .thumbs,
.grid .hero-carousel.bg-brand-colour3 .caption,
.grid .hero-carousel.bg-brand-colour3 .swiper-container,
.grid .hero-carousel.bg-brand-colour3 .swiper-wrapper {
    background-color: #769c9f
}

.grid .hero-carousel.bg-brand-colour3 .display .meta a {
    color: #fff;
    font-weight: 700
}
.grid .hero-carousel.bg-brand-colour3 .picture .image:before {
    background: linear-gradient(0deg,#769c9f,rgba(0,108,184,0) 27%,rgba(0,108,184,0))
}

.grid .hero-carousel.bg-brand-colour3 .thumbs {
    background-color: #769c9f
}
.grid .hero-carousel.colour2.bg-brand-colour3 .display .meta a {
    color: #202020
}

@media screen and (min-width: 768px) {
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-colour3 .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-colour3 .caption {
        background: linear-gradient(180deg,rgba(0,108,184,0),#769c9f 70%)
    }	
}

@media screen and (min-width: 1024px) {
	.grid .hero-carousel.bg-brand-colour3 .swiper-box,
	.grid .hero-carousel.bg-brand-colour3 .swiper-container,
	.grid .hero-carousel.bg-brand-colour3 .swiper-wrapper {
        background-color: #769c9f
    }
	.grid .hero-carousel.bg-brand-colour3 .picture .image:before {
        background: linear-gradient(90deg,#769c9f,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.grid .hero-carousel.bg-brand-colour3 .picture .image:after {
        background: linear-gradient(270deg,#769c9f,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-colour3 .caption,
	.flexbox #foot .oneColumn .hero-carousel.colour3 .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-colour3 .caption,
	.flexbox #top .oneColumn .hero-carousel.colour3 .caption {
        background: transparent
    }
}

.fpjpurple {
	background-color: #6d2158;
}



/*Slider brand colours*/

/*Slider EF colours*/
.grid .hero-carousel.bg-brand-ef .caption,
.grid .hero-carousel.bg-brand-ef .swiper-container,
.grid .hero-carousel.bg-brand-ef .swiper-wrapper {
    background-color: #f59e2d
}

.grid .hero-carousel.bg-brand-ef .picture .image:before {
    background: linear-gradient(0deg,#f59e2d,rgba(0,108,184,0) 27%,rgba(0,108,184,0))
}

.grid .hero-carousel.bg-brand-ef .thumbs {
    background-color: #f59e2d
}

@media screen and (min-width: 768px) {
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-ef .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-ef .caption {
        background: linear-gradient(180deg,rgba(0,108,184,0),#f59e2d 70%)
    }	
}

@media screen and (min-width: 1024px) {
	.grid .hero-carousel.bg-brand-ef .swiper-box,
	.grid .hero-carousel.bg-brand-ef .swiper-container,
	.grid .hero-carousel.bg-brand-ef .swiper-wrapper {
        background-color: #f59e2d
    }
	.grid .hero-carousel.bg-brand-ef .picture .image:before {
        background: linear-gradient(90deg,#f59e2d,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.grid .hero-carousel.bg-brand-ef .picture .image:after {
        background: linear-gradient(270deg,#f59e2d,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	 .flexbox #foot .oneColumn .hero-carousel.bg-brand-ef .caption,
	 .flexbox #top .oneColumn .hero-carousel.bg-brand-ef .caption {
        background: transparent
    }

}

/*Slider AF colours*/
.grid .hero-carousel.bg-brand-af .caption,
.grid .hero-carousel.bg-brand-af .swiper-container,
.grid .hero-carousel.bg-brand-af .swiper-wrapper {
    background-color: #41ad49
}

.grid .hero-carousel.bg-brand-af .picture .image:before {
    background: linear-gradient(0deg,#41ad49,rgba(0,108,184,0) 27%,rgba(0,108,184,0))
}

.grid .hero-carousel.bg-brand-af .thumbs {
    background-color: #41ad49
}

@media screen and (min-width: 768px) {
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-af .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-af .caption {
        background: linear-gradient(180deg,rgba(0,108,184,0),#41ad49 70%)
    }	
}

@media screen and (min-width: 1024px) {
	.grid .hero-carousel.bg-brand-af .swiper-box,
	.grid .hero-carousel.bg-brand-af .swiper-container,
	.grid .hero-carousel.bg-brand-af .swiper-wrapper {
        background-color: #41ad49
    }
	.grid .hero-carousel.bg-brand-af .picture .image:before {
        background: linear-gradient(90deg,#41ad49,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.grid .hero-carousel.bg-brand-af .picture .image:after {
        background: linear-gradient(270deg,#41ad49,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-af .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-af .caption {
        background: transparent
    }
}

/*Slider FPJ colours*/
.grid .hero-carousel.bg-brand-fpj .caption,
.grid .hero-carousel.bg-brand-fpj .swiper-container,
.grid .hero-carousel.bg-brand-fpj .swiper-wrapper {
    background-color: #6d2158
}

.grid .hero-carousel.bg-brand-fpj .picture .image:before {
    background: linear-gradient(0deg,#6d2158,rgba(0,108,184,0) 27%,rgba(0,108,184,0))
}

.grid .hero-carousel.bg-brand-fpj .thumbs {
    background-color: #6d2158
}

@media screen and (min-width: 768px) {
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-fpj .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-fpj .caption {
        background: linear-gradient(180deg,rgba(0,108,184,0),#6d2158 70%)
    }	
}

@media screen and (min-width: 1024px) {
	.grid .hero-carousel.bg-brand-fpj .swiper-box,
	.grid .hero-carousel.bg-brand-fpj .swiper-container,
	.grid .hero-carousel.bg-brand-fpj .swiper-wrapper {
        background-color: #6d2158
    }
	.grid .hero-carousel.bg-brand-fpj .picture .image:before {
        background: linear-gradient(90deg,#6d2158,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.grid .hero-carousel.bg-brand-fpj .picture .image:after {
        background: linear-gradient(270deg,#6d2158,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-fpj .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-fpj .caption {
        background: transparent
    }
}

/*Slider PP colours*/
.grid .hero-carousel.bg-brand-pp .caption,
.grid .hero-carousel.bg-brand-pp .swiper-container,
.grid .hero-carousel.bg-brand-pp .swiper-wrapper {
    background-color: #1F5CA6
}

.grid .hero-carousel.bg-brand-pp .picture .image:before {
    background: linear-gradient(0deg,#1F5CA6,rgba(0,108,184,0) 27%,rgba(0,108,184,0))
}

.grid .hero-carousel.bg-brand-pp .thumbs {
    background-color: #1F5CA6
}

@media screen and (min-width: 768px) {
	.flexbox #foot .oneColumn .hero-carousel.bg-brand-pp .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-pp .caption {
        background: linear-gradient(180deg,rgba(0,108,184,0),#1F5CA6 70%)
    }	
}

@media screen and (min-width: 1024px) {
	.grid .hero-carousel.bg-brand-pp .swiper-box,
	.grid .hero-carousel.bg-brand-pp .swiper-container,
	.grid .hero-carousel.bg-brand-pp .swiper-wrapper {
        background-color: #1F5CA6
    }
	.grid .hero-carousel.bg-brand-pp .picture .image:before {
        background: linear-gradient(90deg,#1F5CA6,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	.grid .hero-carousel.bg-brand-pp .picture .image:after {
        background: linear-gradient(270deg,#1F5CA6,rgba(0,108,184,0) 150px,rgba(0,108,184,0))
    }
	 .flexbox #foot .oneColumn .hero-carousel.bg-brand-pp .caption,
	.flexbox #top .oneColumn .hero-carousel.bg-brand-pp .caption {
        background: transparent
    }
}