.div-under-faded-hero-image {margin-top:-13vw;}
@media only screen and (max-width:1100px) {.div-under-faded-hero-image {margin-top:-20vw;}}
@media only screen and (max-width:700px) {.div-under-faded-hero-image {margin-top:-45vw;}}

.sb-brochure-link {padding-top:15px;}

.image-01, .image-02 {position: relative;}
    
.image-01 figcaption .caption1,
.image-01 figcaption .caption2,
.image-01 figcaption .caption3,
.image-01 figcaption .caption4,
.image-01 figcaption .caption5,
.image-01 figcaption .caption6,
.image-01 figcaption .caption7,
.image-01 figcaption .caption8,
.image-01 figcaption .caption9,
.image-01 figcaption .caption10 {position: absolute;  color:#333; font-size:2.4vw; line-height:2.1vw; font-family:Roboto;}

.image-02 figcaption .caption1,
.image-02 figcaption .caption2,
.image-02 figcaption .caption3,
.image-02 figcaption .caption4,
.image-02 figcaption .caption5,
.image-02 figcaption .caption6,
.image-02 figcaption .caption7,
.image-02 figcaption .caption8,
.image-02 figcaption .caption9,
.image-02 figcaption .caption10 {position: absolute;  color:#333; font-size:2.4vw; line-height:2.1vw; font-family:Roboto;}

 @media only screen and (min-width:500px) {
 .image-01 figcaption .caption1,
 .image-01 figcaption .caption2,
 .image-01 figcaption .caption3,
 .image-01 figcaption .caption4,
 .image-01 figcaption .caption5,
 .image-01 figcaption .caption6,
 .image-01 figcaption .caption7,
 .image-01 figcaption .caption8,
 .image-01 figcaption .caption9,
 .image-01 figcaption .caption10 {font-size:14px; line-height:13px;}
 }  
 @media only screen and (min-width:500px) {
 .image-02 figcaption .caption1,
 .image-02 figcaption .caption2,
 .image-02 figcaption .caption3,
 .image-02 figcaption .caption4,
 .image-02 figcaption .caption5,
 .image-02 figcaption .caption6,
 .image-02 figcaption .caption7,
 .image-02 figcaption .caption8,
 .image-02 figcaption .caption9,
 .image-02 figcaption .caption10 {font-size:14px; line-height:13px;}
 } 

.image-01 figcaption .caption1 {top: 5%; left:2%;}
.image-01 figcaption .caption2 {top: -5%; left:41.5%;}
.image-01 figcaption .caption3 {top: 3%; left:41.5%;}
.image-01 figcaption .caption4 {top: 66%; left:35%;}
.image-01 figcaption .caption5 {top: 36%; left:70%; right:-2%;}
@media only screen and (max-width:900px) {.image-01 figcaption .caption5 {top: 25%; left:72%; right:-3%;}} 
@media only screen and (max-width:680px) {.image-01 figcaption .caption5 {top: 30%; left:72%; right:-3%;}}  
.image-01 figcaption .caption6 {top: 10%; left:55%;}

.image-02 figcaption .caption1 {top: 18%; left:5%;}
.image-02 figcaption .caption2 {top: 18%; left:32%;}
.image-02 figcaption .caption3 {top: 18%; left:43%;}
.image-02 figcaption .caption4 {top: 61%; left:36%; }
.image-02 figcaption .caption5 {top: 62%; left:55%;}
.image-02 figcaption .caption6 {top: 22%; left:60%;} 
.image-02 figcaption .caption7 {top: 34%; left:70%; right:-2%;} 

/** below code added 30July25 re the new upper set of 'Application' links **/

.container-only-buttons-upper {padding-right:20px;}
    .container-only-buttons-upper p {text-align:center; border111:1px solid red;}
    .videos p, .applications p {text-align:center; padding-bottom:7px; margin-bottom:0;} 
    .applications p {padding-right:15px;}
    .sb-and-links{
            display:flex;
            flex-direction:row;
            text-align:center;
            justify-content:center;  /**don't think there is a justify-content:left; so presumably this isn't doing anything, check **/
            width:100%;
            margin:0 auto 8px; 
            padding:0;
            }
    .sb {width:42%; padding:0 1%;}
    .links {width:58%; padding:0 1%;}

                @media only screen and (max-width:970px) {
                .sb-and-links
                    {flex-direction:column;
                    text-align: center;
                    justify-content:center;
                    align-items:center; /*centres vert when dir=row ****/     /**********NOT SURE IF THIS IS DOING ANYTHING - CHECK ********/
                    width:94%;
                    padding: 3%;
                    margin: 0 auto 20px 0;}
                    .sb, .links {width:100%; padding:0 1%;}
                    }
    @media only screen and (min-width:700px) and (max-width:970px) {
        .sb {margin-top:-70px;}
    }
        
        
        
.videos-applications{
            display:flex;
            flex-direction:row;
            text-align:center;
            justify-content:center;  /**don't think there is a justify-content:left; so presumably this isn't doing anything, check **/
            width:100%;
            margin:0 auto 8px; 
            padding:0;
            }
.videos {width:50%; padding:0 2%;}
.applications {width:50%; padding:0 2%;}
    
            @media only screen and (max-width:636px) {
            .videos-applications
                {flex-direction:column;
                text-align: center;
                justify-content:center;
                align-items:center; /*centres vert when dir=row ****/     /**********NOT SURE IF THIS IS DOING ANYTHING - CHECK ********/
                width:84%;
                padding: 0 5%;
                margin: 0 auto 20px 0;}
                .videos, .applications {width:100%; padding:0 2%;}
                }  

  .link-spacer-description {padding-left:35px;}
    .link-spacer-intro {padding-left:72px;}
    .link-spacer-near-line {padding-left:43px;}
    .link-spacer-off-line {padding-left:12px;}
    .link-spacer-extended {padding-left:17px;}
    .link-spacer-examination {padding-left:15px;}
    .link-spacer-applications {padding-left:0px;}
    .link-spacer-different {padding-left:27px;}
    
    @media only screen and (max-width:740px) {
    .link-spacer-description {padding-left:30px;}
    .link-spacer-intro {padding-left:64px;}
    .link-spacer-near-line {padding-left:38px;}
    .link-spacer-off-line {padding-left:11px;}
    .link-spacer-extended {padding-left:69px;}
    .link-spacer-examination {padding-left:67px;}
    .link-spacer-applications {padding-left:54px;}
    .link-spacer-different {padding-left:79px;}    
    }
</style>