/*                                                                      */
/* 		           FEATURED CONTENT - 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 -   Pick up new Feature sprite offsets from GS      */
/* v004 19 Dec 2019 -   Fix background colours, as the JS uses them     */
/*                                                                      */
/*                                                                      */

  /* Slideshow */

  div.wrapper.featured { background-color: white; }     /* Essential, as JS uses this colour for transition */

  div.wrapper.featured { position: relative; display: block; }
  section#featuredcontent { position: relative; }
  .slideshow { height: 330px; width: 100%; overflow: hidden; margin: 0 auto; }
  .slideshow > div { background-color: white; }
  a.activeSlide { font-weight: bold; }
  .slide-content { height: 330px; width: 100%; float: left; }
  .slide-content > div { width: 1000px; margin: 0 auto; }
  .content .slide-content h2 { font-size: 150%; margin-top: 0px; }
  .slide-image img { border: none; }
  .slide-image { width: 1000px; float: left; }
  
  /* The page progression indicator */
  #slideshow-nav { position: absolute; margin: 0 auto; top: 300px; right: 10px; z-index: 100;}
  #slideshow-nav a { 
    display: inline-block; 
    overflow: hidden; 
    text-indent: -50px; 
    height: 19px; 				/* Changed from 20px to 19px becauise line in sprite was showing */
    width: 20px; 
    margin-right: 5px; 
	background-position: -83px -460px;
  }
  #slideshow-nav a.activeSlide { background-position: -103px -460px; }
  #slideshow-nav a:hover { 		 background-position: -23px -460px; } 


  .slideshow div.slide-content {
    background: url(https://cms03-uk.s3.eu-west-2.amazonaws.com/csg-ux-02-feature-1400-20260316-002-optim.jpg) no-repeat 50% 0;
  }
  .slideshow div.slide-panel {
    width: 485px;
	min-height: 160px;
    margin: 50px 0 0 50px;
    padding: 20px 20px 20px 20px;
	background-color: rgba(0, 114, 206, 0.9) /* 90% CSG Blue (Pantone 285c) */;
	border: 5px solid white;
  }
  .slideshow a:hover div.slide-panel {
	background-color: white;
	border-color: black;
  }
  .slideshow div.slide-content			 {	background-position: 50%  -250px; }
  .slideshow div.slide-content.feature1	 {	background-position: 50%  -250px; }
  .slideshow div.slide-content.feature2	 {	background-position: 50%  -590px; }
  .slideshow div.slide-content.feature3	 {	background-position: 50%  -930px; }
  .slideshow div.slide-content.feature4	 {	background-position: 50% -1270px; }
  .slideshow div.slide-content.feature5	 {	background-position: 50% -1610px; }
  .slideshow div.slide-content.feature6	 {	background-position: 50% -1950px; }
  .slideshow div.slide-content.feature7	 {	background-position: 50% -2290px; }
  .slideshow div.slide-content.feature8	 {	background-position: 50%  -250px; }

  /* New offsets from GS */
  .slideshow div.slide-content			 {	background-position: 50%   -70px; }
  .slideshow div.slide-content.feature1	 {	background-position: 50%   -70px; }
  .slideshow div.slide-content.feature2	 {	background-position: 50%  -410px; }
  .slideshow div.slide-content.feature3	 {	background-position: 50%  -750px; }
  .slideshow div.slide-content.feature4	 {	background-position: 50% -1090px; }
  .slideshow div.slide-content.feature5	 {	background-position: 50% -1430px; }
  .slideshow div.slide-content.feature6	 {	background-position: 50% -1770px; }
  .slideshow div.slide-content.feature7	 {	background-position: 50%   -70px; }



  .slideshow h3,
  .slideshow p {
    color: white;
  }
  .slideshow h3 {
    font-size: 2.75em;
    font-weight: 300;
    line-height: 1.1em;
    max-width: 600px;
    margin: 0;
    padding: 0;
  }
 
 /* Added by IainMc 20260115 */ 
.slideshow .banner-text h3 {
    font-size: 2.15em;
    font-weight: 300;
    line-height: 1.25em;
  }
/* Added by IainMc 20260115 ++ END ++ */ 
  
  .slideshow h3 a {
    color: white;
    text-decoration: none;
  }
  
  .slideshow h3 a {
    color: white;
    text-decoration: none;
  }
  .slideshow p {
    font-size: 1.2em;
    margin: 0;
    max-width: 600px;
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .slideshow p.intro {
    font-size: 1.5em;
    font-weight: bold;
  }
  .slideshow p a,
  .slideshow a p,
  .slideshow p a p {
    color: white;
  }
  .slideshow a:hover div.slide-panel h3,
  .slideshow a:hover div.slide-panel p {
	color: #0072ce /* CSG Blue (Pantone 285C) */;
  }

