/*ANIMATION*/

@keyframes dash {
    to { stroke-dashoffset: 0; }
}

.banner-outer { background-color: #30264b; position: relative; }
.banner { overflow: hidden; background-repeat: no-repeat; background-size: cover; transition: min-height 500ms allow-discrete; }

@starting-style {
    .banner.expandforform { height: 0px; }
}

.banner.about { background-image: url(../images/banner/about-header.webp); height: 700px; padding-top: 250px; }
.banner.ambulance { background-image: url(../images/banner/ambulance-header.jpg); }
.banner.band-badges { background-image: url(../images/banner/band-badges-header.webp); }
.banner.biker-badges { background-image: url(../images/banner/bikers-clubs-header.webp); }
.banner.club-badges { padding-top: 250px !important; }
.banner.contact { padding-top: 225px; padding-bottom: 30px; background-image: url(../images/banner/Contact-us-header.webp); }
.banner.cookies { padding-top: 115px; padding-bottom: 50px; }
.banner.custom-armbands { background-image: url(../images/banner/armbands-header.webp); }
.banner.custom-pennants { background-image: url(../images/banner/pennants-header.webp); padding-bottom: 40px; }
.banner.custom-tablecloths { background-image: url(../images/banner/table-cloths-header.webp); }
.banner.custom-flags { background-image: url(../images/banner/flags-header.webp); }
.banner.embroidered-badges { background-image: url(../images/banner/embroidered-badges-header.webp); padding-bottom: 20px; }
.banner.embroidered-pennants { background-image: url(../images/banner/embroidered-pennants-header.webp); }
.banner.epaulettes { background-image: url(../images/banner/epaulettes-sliders-header.webp); }
.banner.error { background-image: url(../images/banner/golden-finishes.webp); padding-top: 240px; padding-bottom: 0px; }
.banner.football-badges { background-image: url(../images/banner/football-clubs-header.webp); }
.banner.personalised-sashes { background-image: url(../images/banner/sashes-header.webp); padding-bottom: 30px; }
.banner.woven-badges { background-image: url(../images/banner/woven-badges-header.webp); }
.banner.martial-arts-badges { background-image: url(../images/banner/martial-arts-header.webp); }
.banner.military-patches { background-image: url(../images/banner/military-services-header.webp); }
.banner.meet-the-team { background-image: url(../images/banner/meet-the-team-header.webp); padding-bottom: 20px; }
.banner.music-stand-banners { background-image: url(../images/banner/music-stand-header.webp); }
.banner.our-facilities { background-image: url(../images/banner/facilities-header.webp); padding-top: 250px; }
.banner.personalised-badges { background-image: url(../images/banner/badges-header.webp); padding-bottom: 40px; }
.banner.pilot { background-image: url(../images/banner/pilot-header.jpg); }
.banner.print-transfers { background-image: url(../images/banner/print-transfers-header.webp); }
.banner.printed-badges { background-image: url(../images/banner/printed-badges-header.webp); padding-bottom: 30px; }
.banner.printed-pennants { background-image: url(../images/banner/printed-pennants-header.webp); }
.banner.printed-sashes { background-image: url(../images/banner/printed-sashes-header.webp); }
.banner.promotional-sashes { background-image: url(../images/banner/embroidered-sashes-header.webp); }
.banner.ready-range { background-image: url(../images/banner/ready-range-header.webp); }
.banner.scout-badges { background-image: url(../images/banner/scouts-guides-header.webp); }
.banner.sewing-services { background-image: url(../images/banner/sewing-services-header.webp); }
.banner.swimming-gymnastics { background-image: url(../images/banner/swimming-gymnastics-header.webp); }
.banner.sitemap { max-height: 380px; padding-top: 225px; padding-bottom: 75px; clip-path: url(../images/clip-paths/BannerClipPath.svg#main-banner-clip-path-more); }
.banner.wire-badges { background-image: url(../images/banner/wire-badges-header.webp); padding-bottom: 0px; }

.banner h1 .banner h2, .banner h3 { font-family: "massilia", sans-serif !important; }

.banner .inner { position: relative; }
.banner .inner .inner-sub { transform: translateY(-30px); gap: 20px; display: flex; flex-direction: column; position: relative; justify-content: center; align-items: center; text-align: center; max-width: 860px; margin: auto; background-color: #1B0D43bb; border-radius: 26px; backdrop-filter: blur(16px); padding: 40px 30px; margin-bottom: 25px; border: .2px solid #FFFFFF55; }
.banner .inner .inner-sub .sub { font-size: 2.125rem; font-family: "massilia", sans-serif; font-weight: 600; }

.banner.error .inner .inner-sub { min-height: unset; }

svg path { stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: dash 2s linear forwards; }


@media screen and (max-width:992px) {
    .banner { padding-top: 100px; transition: min-height 500ms ease-in !important; min-height: 450px; }
    .banner.contact { max-height: 600px; padding-top: 150px; }
    .banner.contact .inner-sub { justify-content: flex-start !important; }
    .banner.about, .banner.our-facilities { height: fit-content; padding-top: 150px; padding-bottom: 50px; }
    .banner.cookies { padding-bottom: 150px; }
    .banner .inner .inner-sub { min-height: unset !important; }
    .banner.expandforform { min-height: 600px; transition: min-height 500ms ease-in !important; }
}

@media screen and (min-width: 992px) {
    .banner { padding-top: 200px; margin-top: -200px; }
    .banner.custom-pennants { padding-top: 280px; }
    .banner.personalised-badges { padding-top: 280px; }
    .banner.embroidered-badges { padding-top: 265px; }
    .banner.printed-badges { padding-top: 230px; padding-bottom: 40px; }
    .banner.woven-badges { padding-top: 240px; }
    .banner.wire-badges { padding-top: 210px; min-height: 450px; padding-bottom: 50px; }
    .banner.personalised-sashes { padding-top: 260px; }
    .banner.custom-flags { padding-top: 240px; }
    .banner.music-stand-banners { padding-top: 250px; padding-bottom: 40px; }
    .banner.meet-the-team { padding-top: 280px; }
    .banner.ready-range { padding-bottom: 40px; }
    .banner.print-transfers,
    .banner.custom-tablecloths,
    .banner.custom-armbands,
    .banner.sewing-services,
    .banner.biker-badges,
    .banner.swimming-gymnastics,
    .banner.scout-badges,
    .banner.football-badges,
    .banner.martial-arts-badges,
    .banner.military-patches,
    .banner.band-badges { padding-bottom: 40px; }
    .banner.terms { padding-top: 120px; }

    .banner.printed-pennants { padding-top: 250px; padding-bottom: 30px; }
}

@media screen and (max-width: 991px) {
    .banner.custom-pennants,
    .banner.embroidered-pennants,
    .banner.custom-flags,
    .banner.printed-badges,
    .banner.printed-pennants,
    .banner.embroidered-badges,
    .banner.wire-badges,
    .banner.personalised-sashes,
    .banner.printed-sashes,
    .banner.promotional-sashes,
    .banner.epaulettes,
    .banner.ready-range,
    .banner.music-stand-banners,
    .banner.print-transfers,
    .banner.custom-armbands,
    .banner.sewing-services,
    .banner.swimming-gymnastics,
    .banner.scout-badges,
    .banner.football-badges,
    .banner.band-badges,
    .banner.woven-badges,
    .banner.personalised-badges,
    .banner.custom-tablecloths,
    .banner.biker-badges,
    .banner.martial-arts-badges,
    .banner.military-patches,
    .banner.meet-the-team { padding-top: 150px; }

    .banner.club-badges { padding-top: 150px !important; padding-bottom: 50px; }

    .banner.terms { padding-top: 180px; }
    .banner.ambulance, .banner.pilot { padding-top: 150px; padding-bottom: 50px; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .banner { min-height: 450px; transition: min-height 500ms ease-in; }
    .banner.expandforform { min-height: 600px; transition: min-height 500ms ease-in; }
}

@media screen and (max-width:768px) {
    .banner.custom-pennants h1 { font-size: 10.5vw !important; }
}

@media screen and (min-width: 500px) and (max-width: 767px) {
    .banner.expandforform { min-height: 670px !important; transition: min-height 500ms ease-in; }
}

@media screen and (min-width: 500px) {
    .banner { clip-path: url(../images/clip-paths/BannerClipPath.svg#main-banner-clip-path); }
}

@media screen and (max-width: 499px) {
    .banner { clip-path: url(../images/clip-paths/BannerClipPath.svg#main-banner-clip-path-mobile); }
}