.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.8vw; line-height:2.7vw; font-family:lato;}

.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.8vw; line-height:2.7vw; font-family:lato;}

 @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:14px;}
 }  
 @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:14px;}
 } 
/***
<div class="caption1">Outer sheet opened</div>
<div class="caption2">No visible<br>bind method</div>
<div class="caption3">Very tight fold</div>
<div class="caption4">ISG glue dots<br>between sheets<br>(not visible unless<br>sheets are torn<br>apart and<br>inspected closely)</div>
    ***/
.image-01 figcaption .caption1 {top: 0%; left:80%;}
.image-01 figcaption .caption2 {top: 20%;  left:16%;}
.image-01 figcaption .caption3 {top: 50%; left:1%;}
.image-01 figcaption .caption4 {top: 40%; left:78%; right:-5%}
    
/***
<div class="caption1">Thick-book cross-section comparisons:<br>Wire-stitching v ISG cold-gluing</div>
<div class="caption2">Wire staples</div>
<div class="caption3">ISG cold-glue<br>between sheets</div>
<div class="caption4">1) Stitch/fold/trim<br>process<br>(conventional<br>booklet-maker)</div>
<div class="caption5">2) Individual<br>sheet folding prior<br>to wire-stitching<br>(all Smart-binders)</div>
<div class="caption6">3) Individual sheet folding <br>prior to ISG cold-gluing<br>(Smart-binders SB-1G,<br>SB1-G4, SB-3 and SB-4</div>
***/
.image-02 figcaption .caption1 {top: 5%; left:25%;}
.image-02 figcaption .caption2 {top: 18%; left:32%;}
.image-02 figcaption .caption3 {top: 18%; left:59%;}
.image-02 figcaption .caption4 {top: 72%; left:9%; }
.image-02 figcaption .caption5 {top: 72%; left:36%;}
.image-02 figcaption .caption6 {top: 72%; left:65%; right:-3%;}    
              
.link-small-dark-blue-bg:a {font-size:11px;}

.top-modules {margin: 10px 4% 10px auto; text-align:right;}
 .main-caption {text-align:center; font-size:14px; padding-top:4px;}
    @media only screen and (max-width:600px) {.main-caption {text-align:center; font-size:12px;}}
        @media only screen and (max-width:480px) {.main-caption {text-align:center; font-size:11px;}}