.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;
}