/** rest of table.outer-white-bg is in styles.css**/
  .hyperlinks table.outer-white-bg tr td:nth-child(1) {text-align:left; padding-left:15px;}
  .hyperlinks table.outer-white-bg tr td:nth-child(2) {width:50px; text-align:center;}
  .hyperlinks table.outer-white-bg {max-width:800px;} 

/** rest of .outer-white-bg table css is in styles.css**/
    table.outer-white-bg {max-width:900px; margin: 20px auto 0;}
    table.outer-white-bg tr td  {text-align:center;}
    .table-container-1st-col-left-align table.outer-white-bg tr th:nth-child(1)  {text-align:left; padding-left:5px;}
    .table-container-1st-col-left-align table.outer-white-bg tr td:nth-child(1)  {text-align:left;}
    
    .table-container-1st-and-2nd-col-left-align table.outer-white-bg tr th:nth-child(1),
    .table-container-1st-and-2nd-col-left-align table.outer-white-bg tr th:nth-child(2)
    {text-align:left; padding-left:5px;}
    .table-container-1st-and-2nd-col-left-align table.outer-white-bg tr td:nth-child(1),
    .table-container-1st-and-2nd-col-left-align table.outer-white-bg tr td:nth-child(2)
    {text-align:left;}
    .table-container-top-th-row-left-align table.outer-white-bg tr th {text-align:left; padding-left:5px;}
    .table-container-all-cols-left-align table.outer-white-bg tr th, 
    .table-container-all-cols-left-align table.outer-white-bg tr td {text-align:left; padding-left:5px;} 
     table.outer-white-bg tr th {border:1px solid #ccc; background:#f0f7ff; }
    table.outer-white-bg tr td {border:1px solid #ccc;}
.nohero-header-text--h1-as-h1-size h2 {margin-top:0px; font-weight:400;}
h2 {margin-top:35px; font-weight:800;}
.power-dist-networks h3 {margin-top:30px; font-weight:800;}
.list-numbers-default-white-bg {margin-left:4vw; margin-right:4vw;}
    .list-disc-white-bg {padding-bottom:20px;}
        
/*** Start of responsive table code with col1 & col2 fixed, horiz scroll bar where required
 Edit media query re ".responsive-table-01", and  th:nth-child(2){left:XXpx;} including the two media queries re this CSS.
***/
.responsive-table-swipe-cols-01 p, .responsive-table-swipe-cols-02 p {
    margin-bottom:-10px;
    padding-bottom:0px;
    font-size:1.3rem;
    line-height: 1.4rem;}
@media only screen and (min-width: 480px) {.responsive-table-swipe-cols-01 { display:none !important;}}
@media only screen and (min-width: 480px) {.responsive-table-swipe-cols-02 { display:none !important;}}
 
.table-responsive-container-01,
.table-responsive-container-02
    {width: 100%;
    margin: 16px auto 0;
    overflow-x: auto;
    border-right:1px solid #ccc;}  
.table-responsive-container-01 table,
.table-responsive-container-02 table
    {font-family: arial, "Open Sans", sans-serif;
    color:#505050;
    font-size:1.7rem;
    line-height: 1.8rem;
    font-weight: 400;
    position: relative;
    border-collapse: separate;  /** 'SEPARATE' NOT 'COLLAPSE' OR 1ST COL LOSES RH BORDER WHEN SCOLL COLS TO LEFT **/
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
    white-space: nowrap;}
    @media only screen and (max-width: 900px) {
        .table-responsive-container-01 table,
        .table-responsive-container-02 table
            {font-size: 1.4rem; line-height: 1.5rem;}}
    @media only screen and (max-width: 600px) {
        .table-responsive-container-01 table,
        .table-responsive-container-02 table
            {font-size: 1.2rem; line-height: 1.3rem;}}    
.table-responsive-container-01 tr td,
.table-responsive-container-01 tr th,
.table-responsive-container-02 tr td,
.table-responsive-container-02 tr th   /* table cells */
    {padding: 1px;
    border-spacing:1px;
    border-collapse:separate;}        
/** borders **/
.table-responsive-container-01 table,
.table-responsive-container-01 table td,
.table-responsive-container-01 table th,
.table-responsive-container-02 table,
.table-responsive-container-02 table td,
.table-responsive-container-02 table th
    {border: 1px solid #dedddd;}
.table-responsive-container-01 table thead tr th,
.table-responsive-container-02 table thead tr th
    {border:1px solid #cecdcd;} /** border 'thead' top row cells **/
/** end of borders **/
        
.table-responsive-container-01 table thead tr,
.table-responsive-container-02 table thead tr
    {text-align: left;}
.table-responsive-container-01 table th,
.table-responsive-container-02 table th
    {background: #f0f7ff; /** color of top row (except 1st col, see below) **/
    padding: 0.5vw 0.5vw;  /*** was 1rem 0.4rem 1rem 1rem ****/
    vertical-align: top;
    font-weight:400;} /*** for header row bold use 600 ***/
        
.table-responsive-container-01 table tr:nth-child(odd) td,
.table-responsive-container-02 table tr:nth-child(odd) td
    {background: #ffffff;}
.table-responsive-container-01 table tr:nth-child(even) td,
.table-responsive-container-02 table tr:nth-child(even) td
    {background: #ffffff;}
.table-responsive-container-01 table td,
.table-responsive-container-02 table td
    {color: #1a202c;
    text-align: center;
    padding: 0.5vw 0.5vw;
    vertical-align: middle;
    text-align:left;}

/** START OF LEFT TWO COLS ADJUSTMENTS SO STICKY, AND RE PIXEL ADJUSTMENTS **/        
.table-responsive-container-01 table td:first-child,
.table-responsive-container-01 table th:first-child,
.table-responsive-container-02 table td:first-child,
.table-responsive-container-02 table th:first-child
    {position:sticky; left:0; z-index:1;}

/** table-responsive-container-01 **/        
.table-responsive-container-01 table td:nth-child(2),
.table-responsive-container-01 table th:nth-child(2)
    {position:sticky; left:120px; z-index:2;} /*** z-index 2 **/

/* BELOW  .row-3 is row 3's class in the html. Due to rowspan=2, row 3 2nd col becomes 1st col*/    
.table-responsive-container-01 table .row-3 td:first-child, 
.table-responsive-container-01 table .row-3 th:first-child
    {position:sticky; left:120px; z-index:3;} /*** z-index 3 **/
        
/* BELOW  .row-5 is row 5's class in the html. Due to rowspan=2, row 5 2nd col becomes 1st col*/    
.table-responsive-container-01 table .row-5 td:first-child, 
.table-responsive-container-01 table .row-5 th:first-child
    {position:sticky; left:120px; z-index:4;} /*** z-index 4 **/

/** breakpoints below use same as the text break points above, then adjust left px to match **/    
@media only screen and (max-width: 900px) {
    .table-responsive-container-01 table td:nth-child(2),
    .table-responsive-container-01 table th:nth-child(2),
    .table-responsive-container-01 table .row-3 td:first-child, 
    .table-responsive-container-01 table .row-3 th:first-child,
    .table-responsive-container-01 table .row-5 td:first-child,
    .table-responsive-container-01 table .row-5 th:first-child
     {left:95px;}}   
@media only screen and (max-width: 600px) {
    .table-responsive-container-01 table td:nth-child(2),
    .table-responsive-container-01 table th:nth-child(2),
    .table-responsive-container-01 table .row-3 td:first-child, 
    .table-responsive-container-01 table .row-3 th:first-child,
    .table-responsive-container-01 table .row-5 td:first-child,
    .table-responsive-container-01 table .row-5 th:first-child
    {left:61px;}}  
        
/** table-responsive-container-02  **/           
    .table-responsive-container-02 table td:nth-child(2),
    .table-responsive-container-02 table th:nth-child(2)
        {position:sticky; left:144px; z-index:1;} 

    /** breakpoints below use same as the text break points above, then adjust left px to match **/    
    @media only screen and (max-width: 900px) {
        .table-responsive-container-02 table td:nth-child(2),
        .table-responsive-container-02 table th:nth-child(2)
            {left:85px;}}
    @media only screen and (max-width: 600px) {
        .table-responsive-container-02 table td:nth-child(2),
        .table-responsive-container-02 table th:nth-child(2)
        {left:63px;}}        

/** END OF LEFT PIXEL ADJUSTMENTS **/    
        
.table-responsive-container-01 table th:first-child,
.tabe-responsive-container-01 table th:nth-child(2),
.table-responsive-container-02 table th:first-child,
.table-responsive-container-02 table th:nth-child(2)
    {z-index:3;}
.table-responsive-container-01 table td:first-child,
.table-responsive-container-01 table th:first-child,
.table-responsive-container-02 table td:first-child,
.table-responsive-container-02 table th:first-child
    {background-color:#f0f7ff;}  /** bkgrnd color of 1st col if required **/
.table-responsive-container-01 table,
.table-responsive-container-02 table
{text-wrap:wrap;} 

.notes {font-size:15px; line-height:16px;} 
    @media only screen and (max-width: 900px) {.notes {font-size:14px; line-height:15px;}}
    @media only screen and (max-width: 600px) {.notes {font-size:13px; line-height:14px;}}
    @media only screen and (max-width: 400px) {.notes {font-size:12px; line-height:13px;}}
        
.list-numbers-default-white-bg {margin-left:17px;}
.list-numbers-default-white-bg ol li, .list-numbers-default-white-bg p {font-size:15px; line-height:16px;}
.list-numbers-default-white-bg p {padding-left:44px; padding-top:8px; padding-bottom:0; margin-bottom:0;}
@media only screen and (max-width: 900px) {.list-numbers-default-white-bg ol li, .list-numbers-default-white-bg p {font-size:14px; line-height:15px;  padding-left:2px;}}
@media only screen and (max-width: 600px) {.list-numbers-default-white-bg ol li, .list-numbers-default-white-bg p {font-size:13px; line-height:14px;  padding-left:2px;}}
        
.list-disc-white-bg {margin-bottom:-40px; margin-left:4px;} 
@media only screen and (max-width: 600px){.list-disc-white-bg {margin-bottom:-13px;}} 
        
.heat-output p {font-weight:600;}       
 /**responsive images - rest of code in styles.css file, eg .image-01 to .image-06 css is in styles.css file**/
.image-01 figcaption .caption11, .image-01 figcaption .caption12, .image-01 figcaption .caption13,
.image-01 figcaption .caption14, .image-01 figcaption .caption15,    
.image-07 figcaption .caption1, .image-07 figcaption .caption2, .image-07 figcaption .caption3,
.image-07 figcaption .caption4, .image-07 figcaption .caption5, .image-07 figcaption .caption6,
.image-07 figcaption .caption7, .image-07 figcaption .caption8, .image-07 figcaption .caption9,
.image-07 figcaption .caption10,
.image-08 figcaption .caption1, .image-08 figcaption .caption2, .image-08 figcaption .caption3,
.image-08 figcaption .caption4, .image-08 figcaption .caption5, .image-08 figcaption .caption6,
.image-08 figcaption .caption7, .image-08 figcaption .caption8, .image-08 figcaption .caption9,
.image-08 figcaption .caption10,
.image-09 figcaption .caption1, .image-09 figcaption .caption2, .image-09 figcaption .caption3,
.image-09 figcaption .caption4, .image-09 figcaption .caption5, .image-09 figcaption .caption6,
.image-09 figcaption .caption7, .image-09 figcaption .caption8, .image-09 figcaption .caption9,
.image-09 figcaption .caption10
{position: absolute;  color:#333; font-size:14px; line-height:15px; font-family:roboto;} 

@media only screen and (max-width:500px) {
.image-01 figcaption .caption11, .image-01 figcaption .caption12, .image-01 figcaption .caption13,
.image-01 figcaption .caption14, .image-01 figcaption .caption15,   
.image-07 figcaption .caption1, .image-07 figcaption .caption2, .image-07 figcaption .caption3,
.image-07 figcaption .caption4, .image-07 figcaption .caption5, .image-07 figcaption .caption6,
.image-07 figcaption .caption7, .image-07 figcaption .caption8, .image-07 figcaption .caption9,
.image-07 figcaption .caption10,
.image-08 figcaption .caption1, .image-08 figcaption .caption2, .image-08 figcaption .caption3,
.image-08 figcaption .caption4, .image-08 figcaption .caption5, .image-08 figcaption .caption6,
.image-08 figcaption .caption7, .image-08 figcaption .caption8, .image-08 figcaption .caption9,
.image-08 figcaption .caption10,
.image-09 figcaption .caption1, .image-09 figcaption .caption2, .image-09 figcaption .caption3,
.image-09 figcaption .caption4, .image-09 figcaption .caption5, .image-09 figcaption .caption6,
.image-09 figcaption .caption7, .image-09 figcaption .caption8, .image-09 figcaption .caption9,
.image-09 figcaption .caption10
    {font-size:12px; line-height:11px;}}

.image-01 {position: relative; max-width:600px; margin: 16px auto 16px;}
.image-02 {position: relative; max-width:400px; margin: 36px auto 0;}
.image-03 {position: relative; max-width:400px; margin: 36px auto 0;}
.image-04 {position: relative; max-width:500px; margin: 36px auto 0;}
.image-05 {position: relative; max-width:600px; margin: 36px auto 0;}
.image-06 {position: relative; max-width:600px; margin: 36px auto 0;}
.image-07 {position: relative; max-width:400px; margin: 20px auto 0;}
.image-08 {position: relative; max-width:500px; margin: 36px auto 0;}
.image-09 {position: relative; max-width:500px; margin: 36px auto 0;}
@media only screen and (min-width: 631px) {.mobile-captions { display:none !important; }}
@media only screen and (max-width: 630px) {.desktop-captions { display:none !important; }}
.main-caption {text-align:center; font-size:14px; line-height:15px; margin-top:-5px; }
.main-caption p {text-align:center; margin-top:23px; margin-bottom:40px;}
 @media only screen and (max-width:500px) {.main-caption{font-size:12px; line-height:13px; margin-top:2px; }}
.image-05 .main-caption {margin-top:-11px;}

.image-01 figcaption .caption1 {top:22%; left:-2%;}
.image-01 figcaption .caption2 {bottom:33%; left:-2%;}
.image-01 figcaption .caption3 {top:35%; right:87%}
.image-01 figcaption .caption4 {top:44%; right:89%;}
.image-01 figcaption .caption5 {top:24.5%; right:76%;}
.image-01 figcaption .caption6 {top:33%; right:76%;}
.image-01 figcaption .caption7 {bottom:28%; right:72%}
.image-01 figcaption .caption8 {bottom:36.5%; right:65%;}  
.image-01 figcaption .caption9 {top:9.5%; right:60.5%;}
.image-01 figcaption .caption10 {bottom:24%; left:47%;}
.image-01 figcaption .caption11 {top:1%; right:41%}
.image-01 figcaption .caption12 {bottom:11%; left:55%;}
.image-01 figcaption .caption13 {top:5%; right:32%;}
.image-01 figcaption .caption14 {top:13%; right:5%}

.image-02 figcaption .caption1 {top: 3%; left:5%;}
.image-02 figcaption .caption2 {top: 11%; left:5%;}
.image-02 figcaption .caption3 {top: 19%; left:5%;}
.image-02 figcaption .caption4 {top: 27%; left:5%;}
.image-02 figcaption .caption5 {top: 56%; left:4%;}
.image-02 figcaption .caption6 {top: 72%; left:35%;}
.image-02 figcaption .caption7 {top: 72%; left:79%;}

.image-03 figcaption .caption1 {top: 3%; left:5%;}
.image-03 figcaption .caption2 {top: 11%; left:5%;}
.image-03 figcaption .caption3 {top: 19%; left:5%;}
.image-03 figcaption .caption4 {top: 27%; left:5%;}
.image-03 figcaption .caption5 {top: 56%; left:4%;}
.image-03 figcaption .caption6 {top: 72%; left:35%;}
.image-03 figcaption .caption7 {top: 72%; left:79%;}
.image-03 figcaption .caption8 {top: 36%; left:15%;}

.image-04 figcaption .caption1 {bottom: 52%; left:0%; right:70%;}
.image-04 figcaption .caption2 {top: 64%; left:65%;}

.image-05 figcaption .caption1 {top: 19%; left:9%;}
.image-05 figcaption .caption2 {top: 44%; left:9%;}
.image-05 figcaption .caption3 {top: 44%; left:83%;}
.image-05 figcaption .caption4 {top: 15%; left:83%;} 


.image-06 figcaption .caption1 {top: 42%; left:3%;}
.image-06 figcaption .caption2 {top: 10%; left:6%;}
.image-06 figcaption .caption3 {top: 19%; left:83%;}
.image-06 figcaption .caption4 {top: 2%; left:42%;}

.image-07 figcaption .caption1 {top: -1%; left:10%;}
.image-07 figcaption .caption2 {top: 36%; left:34%; right:37%;}
.image-07 figcaption .caption3 {top: 70%; left:49%;}
.image-07 figcaption .caption4 {top: 55%; left:74%;}

.image-08 figcaption .caption1 {top: 81%; left:40%;}
.image-08 figcaption .caption2 {top: 28%; right:41.5%;}
.image-08 figcaption .caption3 {top: 66%; left:77%;}

.image-09 figcaption .caption1 {top: 23%; left:11%;}
.image-09 figcaption .caption2 {top: 5%; left:35%;}
.image-09 figcaption .caption3 {top: 55%; left:35%; right:35%;}
.image-09 figcaption .caption4 {top: 55%; left:70%;}
.image-09 figcaption .caption5 {top: 88%; left:72%;}

@media only screen and (max-width:740px) {   
    .image-05 figcaption .caption1 {top: 19%; left:5%;}
    .image-05 figcaption .caption2 {top: 44%; left:5%;}
    .image-05 figcaption .caption3 {top: 44%; left:83%;}
    .image-05 figcaption .caption4 {top: 15%; left:83%;} 
    .image-06 figcaption .caption1 {top: 42%; left:1%;}
    .image-06 figcaption .caption2 {top: 10%; left:4%;}
    .image-06 figcaption .caption3 {top: 19%; left:83%;}
    .image-06 figcaption .caption4 {top: 2%; left:42%;} 
}
@media only screen and (max-width:640px) {  
   .image-01 figcaption .caption1 {top:22%; left:0%;}
   .image-01 figcaption .caption2 {bottom:33%; left:0%;}
   .image-01 figcaption .caption7 {bottom:28%; right:70%}
}
@media only screen and (max-width:630px) {   
   .image-05 figcaption .caption1 {top: 18%; left:3%;}
   .image-05 figcaption .caption2 {top: 44%; left:3%;}
   .image-05 figcaption .caption3 {top: 44%; left:83%;}
   .image-05 figcaption .caption4 {top: 15%; left:83%;} 
   .image-06 figcaption .caption1 {top: 42%; left:3%;}
   .image-06 figcaption .caption2 {top: 7%; left:3%;}
   .image-06 figcaption .caption3 {top: 19%; left:83%;}
   .image-06 figcaption .caption4 {top: 1%; left:42%;}
}
@media only screen and (max-width:550px) {
    .image-05 figcaption .caption1 {top: 15%; left:2%;}
   .image-05 figcaption .caption2 {top: 40%; left:2%;}
   .image-05 figcaption .caption3 {top: 44%; left:83%;}
   .image-05 figcaption .caption4 {top: 15%; left:83%;} 
}
@media only screen and (max-width:500px) {  
  .image-07 figcaption .caption1 {top: 6%; left:10%;}
    }
@media only screen and (max-width:400px) {
   .image-05 figcaption .caption1 {top: 13%; left:1%;}
   .image-05 figcaption .caption2 {top: 44%; left:0%;}
   .image-05 figcaption .caption3 {top: 44%; left:83%;}
   .image-05 figcaption .caption4 {top: 15%; left:83%;} 
   .image-06 figcaption .caption1 {top: 42%; left:1%;}
   .image-06 figcaption .caption2 {top: 4%; left:1%;}
   .image-06 figcaption .caption3 {top: 19%; left:83%;}
   .image-06 figcaption .caption4 {top: -1%; left:37%;}
   .image-08 figcaption .caption1 {top: 81%; left:40%;}
   .image-08 figcaption .caption2 {top: 28%; left:36%; right:42%;}
   .image-08 figcaption .caption3 {top: 56%; left:77%;}
   .image-09 figcaption .caption1 {top: 23%; left:9%;}
}
    @media only screen and (max-width:350px) {
    .image-02 figcaption .caption6 {top: 72%; left:31%;}
    .image-03 figcaption .caption6 {top: 72%; left:31%;}
   .image-09 figcaption .caption3 {top: 55%; left:35%; right:37%;}
    }