﻿/*.sys_homeHeaderImg .sys_homeHeaderImgOne {background:url(/SiteElements/Images/HomeSlideShow/2595-St-Thomas-fountain.jpg) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgTwo {background:url(/SiteElements/Images/HomeSlideShow/easy-read.png) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgThree {background:url(/SiteElements/Images/HomeSlideShow/evelina-london.jpg) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgFour {background:url(/SiteElements/Images/HomeSlideShow/heart.jpg) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgFive {background:url(/SiteElements/Images/HomeSlideShow/smokefree.jpg) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgSix {background:url(/SiteElements/Images/HomeSlideShow/cancer-centre-rosie.jpg) no-repeat 0 0;}*/

.sys_homeHeaderImg .sys_homeHeaderImgOne {background:url(/SiteElements/Images/clear.gif) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgTwo {background:url(/SiteElements/Images/clear.gif) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgThree {background:url(/SiteElements/Images/clear.gif) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgFour {background:url(/SiteElements/Images/clear.gif) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgFive {background:url(/SiteElements/Images/clear.gif) no-repeat 0 0;}
.sys_homeHeaderImg .sys_homeHeaderImgSix {background:url(/SiteElements/Images/clear.gif) no-repeat 0 0;}

/*=======================
Cycle SlideShow
=======================*/

/* Play/Pause button */
figure.slideButton {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  z-index: 200;
  bottom: 0;
  left: 50%;
}

figure.slideButton button[name="play"],
figure.slideButton button[name="pause"] {
  position: relative;
  left: -100%;
  width: 50px;
  height: 50px;
  background: #005EB8;
  border: none;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
}
figure.slideButton button[name="play"]:focus,
figure.slideButton button[name="pause"]:focus {
  outline: 0;
  border: 3px solid white;
  box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure.slideButton button[name="play"]:hover,
figure.slideButton button[name="pause"]:hover {
  outline: 0;
  border: 3px solid white;
  box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}

/* Play Button */
figure.slideButton button[name="play"]::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 3px;
  left: 3px;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
}

/* Pause Button */
figure.slideButton button[name="pause"]::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 3px;
  left: 9px;
  width: 28px;
  height: 28px;
  border-style: double;
  border-width: 0px 0px 0px 20px;
  border-color: white;
}
figure.slideButton button[name="pause"]:hover:after, figure.slideButton button[name="pause"]:focus:after {
    left: 6px;
}
/******************** Mobile ************************/
@media screen and (max-width: 980px) {
figure.slideButton button[name="play"], figure.slideButton button[name="pause"]
{
  bottom: 165px;
}
}
@media screen and (max-width: 767px) {
    figure.slideButton {
        display:none;
    }

    /* Play Button */
    figure.slideButton button[name="play"]::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent white;
    }

    /* Pause Button */
    figure.slideButton button[name="pause"]::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border-style: double;
    border-width: 0px 0px 0px 25px;
    border-color: white;
    }
}
/******************** IE 10+ ************************/
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  figure.slideButton button[name='pause']::after
  {
    top: 2px;
    left: 23%;
  }
  figure.slideButton button[name="pause"]:hover:after, figure.slideButton button[name="pause"]:focus:after {
    left: 15%;
  }
    figure.slideButton button[name='play']::after
  {
    top: 1px;
  }
 }
/*---------------------------------------------*/