/*                                                                      */
/* 		              PROMOS - TABLET UP                 		        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL tablet.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 07 Aug 2019 -   Inherited promo sprite offsets from GS          */
/*                                                                      */
/*                                                                      */


/* **************************************** */
/* 				ASIDE		 				*/
/* **************************************** */

  section#main-select aside {
    display: none;
  }

  div.promo {
    /*padding-left: 45px;
    margin-left: 5px;
    margin-right: 5px;*/
    display: block;
	/*float: left;*/		/* 14 Jul 2017 - had to do this instead of inline-block as middle promo on ipad stepping down */
    /*width: 32%;*/     /* ARP 3 7 May 2022 - only become three abreast at desktop */
    max-width: 250px;
  }

  .promo.non-func {
    min-height: 245px;		/* Generally no content in a nf-promo so give it some height (250px - 5px bottom border) */
  }

  div.promo {
    padding: 0;
    margin: 0;
    border-width: 0;
	overflow: hidden;	/* To stop the promos stepping out on tablet - but doesn't work */
	background-color: transparent;
  }
  div.promo a {
	/*display: block;*/     /* Not needed on ARP 3 - or not needed only on non-func promos CHECK */
	overflow: hidden;	/* To stop the promos stepping out on tablet - but doesn't work */
  }
  div.promo.demomode a {
    padding-top: 0;
  }
  div.promo a:hover {
	text-decoration: none;
  }
  div.promo a:hover h3 {
	color: white;
  }
  section#main-select div.promo {
    border-width: 0 5px 5px 5px;
  }
  section#main div.promo:first-of-type {
    border-width: 0 5px 5px 5px;
  }

  div.promo h3,
  div.promo p {
	height: 50px;
    margin: 5px 0 0 0;      /* Changed 10px to 5px 7 Aug 2019 as too deep for sprite */
    padding: 10px 5px 0 10px;
	overflow: hidden;	/* To stop the promos stepping out on tablet - but doesn't work */
	color: black;
  }
  div.promo a:hover h3 {
	background-color: rgba(196, 214, 0, 1.0) /* 100% AZ Lime Green */;
  }
  div.promo h3 a {
	color: black;
	text-decoration: underline;
  }

/* Revised to fit the (old) sprite used to build Demo 1 */
  div.promo.promo0  { background-position:   -10px -20px; }
  div.promo.promo1  { background-position:  -270px -20px; }
  div.promo.promo2  { background-position:  -530px -20px; }
  div.promo.promo3  { background-position:  -790px -20px; }
  div.promo.promo4  { background-position: -1050px -20px; }
  div.promo.promo5  { background-position: -1310px -20px; }
  div.promo.promo6  { background-position: -1570px -20px; }
  div.promo.promo7  { background-position: -1830px -20px; }
  div.promo.promo8  { background-position: -2090px -20px; }
  div.promo.promo9  { background-position: -2350px -20px; }
  div.promo.promo10 { background-position: -2610px -20px; }


/* Non-functional Promos */

  div.promo.non-func {
    background-image: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/arc-ar3-ux-49-promo-tablet-mobile-up-to-1400max-20220606-optim.jpg);
    background-repeat: no-repeat;
    background-position: -0px 0;
  }

  div.promo.non-func.side-note {
    background-image: none;
  }
  div.promo.non-func.no-background {
    background-image: none;
	color: black;
	background-color: white;
  }
  div.promo.non-func.no-background h3,
  div.promo.non-func.no-background p {
    height: auto;
    padding: 10px 20px 20px 20px;
	color: black;
	background-color: white;
    text-transform: none;
  }
  div.promo.non-func.no-background a:hover h3 {
	background-color: white;
  }
  div.promo.non-func.no-background h3 a {
	color: black;
  }
  div.promo.non-func.no-background a {
    display: inline;
    padding: 0 0 0 0;
    font-weight: 800;
    color: black;
    text-decoration: underline;
  }


/* **************************************** */
/*          HORIZONTAL PROMOS                */
/* **************************************** */

  section.content.promos {
    --promo-margin: 30px;
    margin-top: var(--grid-margin);
    padding: 20px var(--promo-margin);
  }

  section.content.promos div.promo {
    position: relative;         /* Needed so that :before stays within the promo */
    background-color: white;
    max-width: none;
    border-radius: var(--border-radius-main);
    box-sizing: border-box;
    height: var(--promo-image-height);
    padding-left: calc( 40% + var(--promo-margin) );
    padding-top: var(--promo-margin);
    padding-right: var(--promo-margin);
    padding-bottom: 20px;
    margin-bottom: var(--grid-margin);
  }

  section.content.promos div.promo:before {
    content: '';
    background-image: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/arc-ar3-ux-49-promo-tablet-mobile-up-to-1400max-20220606-optim.jpg);
    background-repeat: no-repeat;
    background-position: -0px 0;
    border-radius: var(--border-radius-main) 0 0 var(--border-radius-main);
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: inherit; /* has same effect as 100% */
  }
  /*section.content.promos div.promo:before         { background-position:    -5px 0px; }
  section.content.promos div.promo.promo0:before  { background-position:    -5px 0px; }
  section.content.promos div.promo.promo1:before  { background-position:  -265px 0px; }
  section.content.promos div.promo.promo2:before  { background-position:  -525px 0px; }
  section.content.promos div.promo.promo3:before  { background-position:  -785px 0px; }
  section.content.promos div.promo.promo4:before  { background-position: -1045px 0px; }
  section.content.promos div.promo.promo5:before  { background-position: -1305px 0px; }
  section.content.promos div.promo.promo6:before  { background-position: -1565px 0px; }
  section.content.promos div.promo.promo7:before  { background-position: -1825px 0px; }
  section.content.promos div.promo.promo8:before  { background-position: -2085px 0px; }
  section.content.promos div.promo.promo9:before  { background-position: -2345px 0px; }
  section.content.promos div.promo.promo10:before { background-position: -2605px 0px; }*/

  section.content.promos div.promo.promo1:before   { background-position:    -0px 0px; }
  section.content.promos div.promo.promo2:before   { background-position:  -450px 0px; }
  section.content.promos div.promo.promo3:before   { background-position:  -900px 0px; }
  section.content.promos div.promo.promo4:before   { background-position: -1350px 0px; }
  section.content.promos div.promo.promo5:before   { background-position: -1800px 0px; }
  section.content.promos div.promo.promo6:before   { background-position: -2250px 0px; }
  section.content.promos div.promo.promo7:before   { background-position: -2700px 0px; }
  section.content.promos div.promo.promo8:before   { background-position: -3150px 0px; }
  section.content.promos div.promo.promo9:before   { background-position: -3600px 0px; }
  section.content.promos div.promo.promo10:before  { background-position: -4050px 0px; }
  section.content.promos div.promo.promo0:before   { background-position: -4500px 0px; }
  section.content.promos div.promo:before          { background-position: -4500px 0px; }


  section.content.promos div.promo p {
    height: auto;
    font-size: 24px;
    line-height: 30px;
    font-weight: 300;
    height: 80px;               /* Not sure why auto doesn't work here */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: auto;
    color: black;
  }
  section.content.promos div.promo a {
    display: block;             /* Needed for them to be full-width and have the padding applied */
	color: black;
    font-size: 16px;            /* Put back to standard font size */
    line-height: 20px;
	font-style: normal;
	margin-top: var(--grid-margin);
  }
  section.content.promos div.promo a:hover {
    color: white;
  }