/* **************************************** */
/*      BANNER AND ITS BACKGROUND IMAGE     */
/* **************************************** */

body {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/arc-ar3-ux-03-page-top-mobile-500max-20220524.jpg);
}
header.banner { height: 300px; }
section.content h2 { height: 100px; }
/*nav.primary { margin-top: -220px; }*//*Removed 22 May 2022*/
body.home               { background-position-x:    -0px; }
body.faqs               { background-position-x:  -500px; }
body.documents          { background-position-x: -1000px; }
body.updates            { background-position-x: -1500px; }
body.contacting-us      { background-position-x: -2000px; }
body.spare1             { background-position-x: -2500px; }
body.spare2             { background-position-x: -3000px; }
body                    { background-position-x: -3500px; }

@media screen and (min-width: 500px) {
  body { background-image: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/arc-ar3-ux-04-page-top-mobile-768max-20220524.jpg); }
  body                  { background-position-x: -6144px; }
  body.home             { background-position-x:    -0px; }
  body.faqs             { background-position-x:  -768px; }
  body.documents        { background-position-x: -1536px; }
  body.updates          { background-position-x: -2304px; }
  body.contacting-us    { background-position-x: -3072px; }
  body.spare1           { background-position-x: -3840px; }
  body.spare2           { background-position-x: -4608px; }
  body                  { background-position-x: -5376px; }
}
@media screen and (min-width: 700px) {
  header.banner { height:90px; }
  div.wrapper.nav { height: 210px; }
}
@media screen and (min-width: 767px) {
  header.banner { height:90px; }
  div.wrapper.nav { height: 460px; }
  section.content h2 { height: 320px; }
  /*nav.primary { margin-top: -470px; }*//*Removed 22 May 2022*/
  body { background-image: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/arc-ar3-ux-05-page-top-tablet-1024max-20220524-b-kraken.jpg); }
  body                  { background-position-x: -8192px; }
  body.home             { background-position-x:    -0px; }
  body.faqs             { background-position-x: -1024px; }
  body.documents        { background-position-x: -2048px; }
  body.updates          { background-position-x: -3072px; }
  body.contacting-us    { background-position-x: -4096px; }
  body.spare1           { background-position-x: -5120px; }
  body.spare2           { background-position-x: -6144px; }
  body                  { background-position-x: -7168px; }
}
@media screen and (min-width: 1000px) {
  body { background-image: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/arc-ar3-ux-06-page-top-desktop-1400max-20220524-b-kraken.jpg); }
  body                  { background-position-x:-11200px; }
  body.home             { background-position-x:    -0px; }
  body.faqs             { background-position-x: -1400px; }
  body.documents        { background-position-x: -2800px; }
  body.updates          { background-position-x: -4200px; }
  body.contacting-us    { background-position-x: -5600px; }
  body.spare1           { background-position-x: -7000px; }
  body.spare2           { background-position-x: -8400px; }
  body                  { background-position-x: -9800px; }
}

  /* On normal page, bg image only comes down to bottom of header, so main content needs background grey */
  div.wrapper.main { 
	background-color: #D2D1CF /* __ ARP 3 __ Pebble Grey (Page pasteboard) */;
  }

/* **************************************** */
/*          MOBILE NAV                      */
/* **************************************** */

header.banner nav#func li a,
header #search-icon {
  background-color: white;
  mask-image: var(--master-sprite);
  -webkit-mask-image: var(--master-sprite);
  mask-position:         -9999px -9999px;
  -webkit-mask-position: -9999px -9999px;
}
header.banner nav#func li.home a {
  mask-position:            -6px  -0px;
  -webkit-mask-position:    -6px  -0px;
}
header.banner nav#func li.search a {
  mask-position:          -306px  -0px;
  -webkit-mask-position:  -306px  -0px;
}
header.banner nav#func li.disp-nav a {
  mask-position:          -106px  -0px;
  -webkit-mask-position:  -106px  -0px;
}
div#search-icon {
  mask-position:          -306px  -0px;
  -webkit-mask-position:  -306px  -0px;
}

header #search-icon {
  height: 42px;
  width: 42px;          /* Made slightly larger so that SVG mask can be fully seen */
  border-radius: 0;     /* Not needed because it is masked against background blue */
}


/* **************************************** */
/*          H2 AND FIRST ARTICLE            */
/* **************************************** */

section.content h2 {        /* Top H2s appear in the header area on ARP 3 */
  position: absolute;
  top: 175px;
  left: auto;
  padding-top: 0;           /* As it's bottom aligned, add the top padding to the 'top' */
  /* height is set up above */
  width: calc(100% - 4 * var(--left-margin));

  display: flex;            /* So it can be aligned to the bottom of its space */
  align-items: end;
}
#main-select section.content h2 {       /* Top H2s appear in the header area on ARP 3 */
  position: inherit;                    /* But not the one in the Select area */
  height: auto;
}

/* First article */
section.content article.order1 {
  padding-top: 25px;        /* Top padding needed as the H2 isn't there to provide it */
  margin-top: 0;            /* No gap needed to breadcrumbs immediately above */
}

/* **************************************** */
/*          CONTENT/ARTICLE                 */
/* **************************************** */

/* This project needs articles to be nearly full width  */
/* so they can have grey borders and rounded corners    */
section.content {
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--left-margin);;
  padding-right: var(--left-margin);;
}

section.content article {
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--left-margin);
  padding-right: var(--left-margin);
  padding-bottom: 20px;                     /* Changed 40px to 20px 25 May 2022*/
  background-color: white;
  margin-bottom: 10px;                      /* This shows the body color so acts like a top border */
  border-radius: var(--border-radius-main);
}

section.content article.order1 {
  border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
}

section.content article.no-content-placeholder:empty {      /* Placeholders for unused child subjects */
  padding-bottom: 0;
}

/* ******************************** */
/*          WHERE NEXT              */
/* ******************************** */

section.content article.where-next > h3 {
  font-weight: 300;
  font-size: 48px;
  line-height: 56px;
  font-style: italic;
  color: #0083A9 /* __ ARP 3 __ Blue (Pantone 314c) */;
}