/* **************************************** */
/*          MAIN SECTIONS                   */
/* **************************************** */

:root {             
  --aside-width: 0px;
  --nf-image-height: 350px;
}

header.banner div#audience-name, 
header #search-icon {
  right: calc( 2 * var(--left-margin) );
}

section.content, aside {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--left-margin);
  padding-right: var(--left-margin);
}

aside {
  padding-left: 0;          /* No longer needed at Tablet as the Promos have their own padding */
  padding-right: 0;
}

section.content.promos {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* **************************************** */
/*          NON-FUNC PROMOS                 */
/* **************************************** */

  section#main div.promo.non-func {
    border-width: 0;
    margin-top: var(--grid-margin);
    border-radius: var(--border-radius-main);
  }

  section#main div.promo.side-note {
    padding-left: var(--left-margin);
    padding-right: var(--left-margin);
    padding-bottom: 20px;
    max-width: none;
    background-color: white;
    margin-bottom: var(--grid-margin);
  }

  section#main div.promo.see-your-pension-amount {
    display: none;      /* Only switched on at desktop */
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: auto;
    border: 2px solid white;
    background-image: none;
  }
  section#main div.promo.see-your-pension-amount p {
    height: auto;
    margin: 0;
    padding: 0;
  }
  section#main div.promo.see-your-pension-amount p a {
    display: block;
    box-sizing: border-box;
    padding-top: 100px;
    height: 160px;
    text-align: center;
    font-weight: 700;
    color: white;
    background-color: #0083A9 /* __ ARP 3 __ Blue (Pantone 314c) */;
    text-decoration: none;
    position: relative;     /* To stop the :before dropping through */
  }
  section#main div.promo.see-your-pension-amount p a:hover {
    background-color: #6E267B /* __ ARP 3 __ Purple (Pantone 259c) */;
  }
  section#main div.promo.see-your-pension-amount p a:before {
    content: '';
    height: 54px;
    width: 60px;
    background-color: white;
    position: absolute;
    margin-left: -30px;
    margin-top: -70px;
    left: 50%;
    font-size: 14px;
    line-height: 17px;
    padding-top: 10px;
    -webkit-mask-image: var(--master-sprite);
    mask-image: var(--master-sprite);
    -webkit-mask-position:  -97px -90px;
    mask-position:          -97px -90px;;
  }
  
/* **************************************** */
/*    IMAGE ABOVE FIRST NON-FUNC PROMOS     */
/* **************************************** */

  /* Changed nth-of-type(2) to nth-of-type(1) 11 Jun 2024 */
  section#main div.promo.side-note:nth-of-type(1) {
    position: relative;         /* so that :before does not drop through */
    padding-top: var(--nf-image-height);
    min-height: auto;
  }
  /* Changed nth-of-type(2) to nth-of-type(1) 11 Jun 2024 */
  section#main div.promo.side-note:nth-of-type(1):before {
    content: '';
    background-image: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/arc-ar3-ux-42-support-extra-mobile-768max-20220606-optim.jpg);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
  }
  /* Changed nth-of-type(2) to nth-of-type(1) 11 Jun 2024 */
  section#main div.promo.side-note:nth-of-type(1):before {
    border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
    width: 100%;
    height: var(--nf-image-height);
  }
/*
  section#main div.promo.side-note.promo1:before    { background-position-x:    -0px; }
  section#main div.promo.side-note.promo2:before    { background-position-x:  -700px; }
  section#main div.promo.side-note.promo3:before    { background-position-x: -1400px; }
  section#main div.promo.side-note.promo4:before    { background-position-x: -2100px; }
  section#main div.promo.side-note.promo5:before    { background-position-x: -2800px; }
  section#main div.promo.side-note.promo6:before    { background-position-x: -3500px; }
  section#main div.promo.side-note.promo7:before    { background-position-x: -4200px; }
  section#main div.promo.side-note.promo8:before    { background-position-x: -4900px; }
  section#main div.promo.side-note.promo9:before    { background-position-x: -5600px; }
  section#main div.promo.side-note:before           { background-position-x: -6300px; }
*/
  section#main div.promo.side-note.promo1:before    { background-position-x:    -0px; }
  section#main div.promo.side-note.promo2:before    { background-position-x:  -950px; }
  section#main div.promo.side-note.promo3:before    { background-position-x: -1900px; }
  section#main div.promo.side-note.promo4:before    { background-position-x: -2850px; }
  section#main div.promo.side-note.promo5:before    { background-position-x: -3800px; }
  section#main div.promo.side-note.promo6:before    { background-position-x: -4750px; }
  section#main div.promo.side-note.promo7:before    { background-position-x: -5700px; }
  section#main div.promo.side-note.promo8:before    { background-position-x: -6650px; }
  section#main div.promo.side-note.promo9:before    { background-position-x: -7600px; }
  section#main div.promo.side-note:before           { background-position-x: -8550px; }


  section#main div.promo.side-note p {
    height: auto;               /* Make it a normal paragraph */
    margin: 0 0 15px 0;         /* Make it a normal paragraph */
    padding: 0;                 /* Make it a normal paragraph */
  }

/* **************************************** */
/*      PENSION INCREASES TABLES            */
/* **************************************** */

  table.collapsible.increases {
    table-layout: fixed;
    width: 100%;
  }


/* **************************************** */
/*      VIDEO: INSET                        */
/* **************************************** */

  .video-inset {
    padding-left: 50px;
  }