.TitleImageandLinkWrapper a:hover {
  text-decoration: none;
}
div.TitleImageandLinkWrapper div.rspWidgetContent img {
  width: auto;
  height: 100%;
  position: relative;
}
.body_products div.TitleImageandLinkWrapper div.rspWidgetContent img {
  top: 0px;
}
div.TitleImageandLinkWrapper span.linkicon,
div.TitleImageandLinkWrapper.rspHeadingBottom span.linkicon {
  display: block;
  position: absolute;
  right: 5px;
  width: 20px;
  height: 20px;
  background: url('img/next-horizontal-small.png') no-repeat 0px 0px;
  z-index: 3;
}
div.TitleImageandLinkWrapper span.linkicon {
  top: 13px;
  bottom: unset;
}
div.TitleImageandLinkWrapper.rspHeadingBottom span.linkicon {
  top: unset;
  bottom: 13px;
  /*8px/*changed to make title and text sit better*/
}
div.TitleImageandLinkWrapper:hover span.linkicon {
  background: url('img/next-horizontal-small.png') no-repeat -40px 0px;
}
/* if the heading is hidden also hide the link icon */
div.TitleImageandLinkWrapper a.noicon span.linkicon {
  display: none;
}
/* specific for full width widget wrappers */
div.FullWidthWidgetHolder div.TitleImageandLinkWrapper span.linkicon {
  bottom: 13px;
  /*7px; /*changed to make title and text sit better*/
}
/* specific for feature widgets */
div.FeatureWidgetHolder div.TitleImageandLinkWrapper span.linkicon {
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: #ff0000 url('img/next-horizontal-small.png') no-repeat -15px 5px;
}
div.FeatureWidgetHolder div.TitleImageandLinkWrapper span.linkicon {
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: #999999 url('img/next-horizontal-small.png') no-repeat -15px 5px;
}
div.rspWidget.rspHeadingBottom .rspWidgetHeading {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 0;
  padding: 8px 10px 0 10px;
  min-height: 2.15em;
  /*added to ensure that a title bar shows (when enabled) even though no text is present*/
}
.FeatureWidgetHolderLeft div.rspWidget.rspHeadingBottom .rspWidgetHeading {
  min-height: 1.4em;
  /*added to ensure that a title bar shows (when enabled) even though no text is present*/
}
.FeatureWidgetHolderRight div.rspWidget.rspHeadingBottom .rspWidgetHeading {
  min-height: 2.8em;
  /*added to ensure that a title bar shows (when enabled) even though no text is present*/
}
div.FeatureWidgetHolder div.FeatureWidgetHolderLeft div.rspWidget.rspHeadingBottom .rspWidgetHeading {
  max-width: 550px;
}
div.FeatureWidgetHolder div.FeatureWidgetHolderRight div.rspWidget.rspHeadingBottom .rspWidgetHeading {
  max-width: 230px;
}
.body_products div.rspWidget.rspHeadingBottom .rspWidgetHeading {
  position: relative;
  font-size: 14px;
  margin: 5px 0 5px 10px;
  /*changed to make heading sit better*/
  padding: 0 30px 0 0;
  /*changed to make heading sit better*/
  line-height: 1em !important;
  border: none !important;
}
body.md.body_products div.rspWidget.rspHeadingBottom .rspWidgetHeading,
body.lg.body_products div.rspWidget.rspHeadingBottom .rspWidgetHeading {
  font-weight: bold;
  /*added to make heading sit better*/
  text-transform: uppercase;
  /*added to make heading sit better*/
}
.body_products div.rspWidget.rspHeadingBottom.producthomepagespot .rspWidgetHeading {
  /*position: relative;
    font-size: 14px;*/
  font-weight: normal !important;
  text-transform: none !important;
  margin: 10px 0 0;
}
.body_products div.rspWidget.rspHeadingBottom span.linkicon {
  bottom: auto;
  top: 13px;
  /*8px /*changed to make heading sit better*/
}
div.FeatureWidgetHolder div.TitleImageandLinkWrapper div.rspWidgetContent img {
  top: -25px;
  min-height: 300px;
  width: auto;
}
div.FeatureWidgetHolder div.TitleImageandLinkWrapper a:hover span.linkicon {
  background: #000000 url('img/next-horizontal-small.png') no-repeat -15px 5px;
}
div.FeatureWidgetHolder div.rspWidget a:hover .rspWidgetHeading {
  background: #000000;
}
div.FeatureWidgetHolder div.FeatureWidgetHolderLeft div.rspWidget span.tl {
  width: 115px;
  height: 115px;
  background: url('../img/tlmedium.png') no-repeat left top;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
/* Title Image Blurb and Link is a variation on this widget so style here */
div.TitleImageBlurbandLinkWrapper {
  overflow: hidden;
}
div.TitleImageBlurbandLinkWrapper div.rollup {
  position: absolute;
  left: 0px;
  /*padding: 10px 10px 20px 10px; /*removed to make title and text sit better*/
  z-index: -1;
  width: 100%;
  display: block;
  -webkit-transition: bottom 0.5s ease;
  -moz-transition: bottom 0.5s ease;
  -o-transition: bottom 0.5s ease;
  -transition: bottom 0.5s ease;
  bottom: -200px;
}
/*div.TitleImageBlurbandLinkWrapper div.rollup {
    position: absolute;
    left: 0px;
    padding: 10px 10px 20px 10px;
    z-index: 2; 
    width: 100%;
    display: block;
    -webkit-transition: bottom 0.5s ease;
    -moz-transition: bottom 0.5s ease;
    -o-transition: bottom 0.5s ease;
    -transition: bottom 0.5s ease;
    bottom: -10px;
    background-color: #f6f6f6;
}*/
div.TitleImageBlurbandLinkWrapper:hover div.rollup {
  display: block;
  bottom: -6px;
  -webkit-transition: bottom 0.5s ease;
  -moz-transition: bottom 0.5s ease;
  -o-transition: bottom 0.5s ease;
  -transition: bottom 0.5s ease;
  z-index: 101;
  /*2*/
}
div.TitleImageBlurbandLinkWrapper {
  padding-bottom: 20px;
}
div.TitleImageBlurbandLinkWrapper div.rollup .rspWidgetHeading {
  line-height: 1.2em;
  background: transparent;
  position: relative;
  top: 0px;
  left: 0px;
}
div.TitleImageBlurbandLinkWrapper div.rollup .rspWidgetHeading span {
  display: block;
  margin: 0 12px 0 0;
  /*5px 5px; changed to make title and text sit better*/
}
div.TitleImageBlurbandLinkWrapper div.rollup div.blurb {
  line-height: 1.4em;
  position: relative;
  padding: 0 20px 20px 10px;
  /*0px; - changed to make title and text sit better*/
  overflow: hidden;
}
body.xs.body_products div.TitleImageBlurbandLinkWrapper div.rollup div.blurb,
body.sm.body_products div.TitleImageBlurbandLinkWrapper div.rollup div.blurb {
  padding: 0;
  color: #333;
}
.FullWidthWidgetHolder div.TitleImageBlurbandLinkWrapper div.rollup {
  padding: 0;
  /* Fixes for the Hub Widgets */
}
div.TitleImageBlurbandLinkWrapper div.rollup div.blurb p {
  /*padding: 0 5px; /*removed to make title and text sit better*/
}
div.TitleImageBlurbandLinkWrapper div.rollup span.linkicon {
  position: absolute;
  bottom: auto;
  top: 13px;
  /*6px; /*changed to make title and text sit better*/
}
/* hover state - gets overwritten with local colours */
/* :hover included as a fallback in case jquery fails to add the .hover class */
div.TitleImageBlurbandLinkWrapper a.hover div.rollup .rspWidgetHeading,
div.TitleImageBlurbandLinkWrapper a:hover div.rollup .rspWidgetHeading,
div.TitleImageBlurbandLinkWrapper div.rollup div.blurb {
  color: #ffffff;
}
div.TitleImageBlurbandLinkWrapper a.hover span.linkicon,
div.TitleImageBlurbandLinkWrapper a:hover span.linkicon {
  background-position: -20px 0px;
}
/* Types of Glass Banner for 16 grid */
.typesofglassbanner {
  clear: both !important;
  margin-right: 0 !important;
}
.typesofglassbanner img {
  top: 0 !important;
}
.typesofglassbanner .rspWidgetHeading {
  top: 10px !important;
  left: 10px !important;
  padding: 0;
  margin: 10px;
  width: 340px !important;
  height: 240px !important;
  position: absolute;
  color: #fff;
  padding: 20px;
  max-width: calc(100% - 20px);
}
.typesofglassbanner .rspWidgetHeading span {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 26px;
  line-height: 30px;
  padding: 0 40px 0 0;
}
@media (min-width: 601px) {
  .typesofglassbanner span.linkicon {
    left: 315px !important;
    bottom: 24px !important;
  }
}
@media (max-width: 600px) {
  .typesofglassbanner .rspWidgetHeading {
    height: 85px !important;
    width: 100% !important;
    bottom: 10px !important;
    top: auto !important;
  }
  .typesofglassbanner span.linkicon {
    right: 20px !important;
    bottom: 20px !important;
  }
}
@media (max-width: 420px) {
  .typesofglassbanner span.linkicon {
    right: 25px !important;
    bottom: 24px !important;
  }
  .typesofglassbanner .rspWidgetHeading {
    height: 111px !important;
    bottom: 10px !important;
    top: auto !important;
  }
  .typesofglassbanner .rspWidgetContent > div {
    /*background-position: 420px;*/
    /*REMOVED - was resolving bottom banner background image on http://qa.pilkington.com/en-gb/mruk/householders/types-of-glass - but made background image on dissappear on http://qa.pilkington.com/en-gb/mruk/architects/types-of-glass*/
  }
}
/*product homepage specific*/
.tplproducthomepage .rspWidgetContent > div {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto !important;
}
/*-------------------------*/
/* responsive */
@media (max-width: 991px) {
  .body_products div.TitleImageBlurbandLinkWrapper {
    padding: 0;
    height: auto !important;
  }
  .body_products div.TitleImageBlurbandLinkWrapper div.rollup {
    display: block;
    position: relative;
    bottom: initial;
    top: initial;
    left: initial;
    right: initial;
    padding: 10px 30px 10px 10px;
    z-index: 2;
  }
  .body_products div.TitleImageBlurbandLinkWrapper div.rollup .rspWidgetHeading {
    padding: 0;
    margin: 0;
  }
  .body_products div.TitleImageBlurbandLinkWrapper div.rollup p {
    /*color: #fff; /*color: #009639;/*changed as losing focus made link text green*/
  }
  .body_products div.TitleImageBlurbandLinkWrapper div.rollup .linkicon {
    margin-top: -10px;
    top: 50%;
    bottom: initial;
    left: initial;
    right: 10px;
  }
  .body_products div.TitleImageBlurbandLinkWrapper div.rollup:hover p {
    color: #fff;
  }
  .body_products div.TitleImageBlurbandLinkWrapper .rspWidgetContent {
    display: none;
  }
}