.grid .spinLayout {
  border-bottom: none
}

.grid .spinLayout::before {
  display: none
}

.picCarousel .swiper-container {
  background-color: #000
}

.layoutIcon.pictureLayout:before {
  background-image: none
}
.grid .spinVideo .videoPreview-container .videoPreview-details .videoPreview-social-sharing ul:first-of-type li:last-of-type {
  display: none
}
/** || Horiztonal navbar  || **/
/* Navbar items shrink*/
.spin2scroller.spin-navbar-scroller li.swiper-slide {
  flex-basis:content
}
/* Reduce text size and keep text together in navbar items*/
.spin2scroller.spin-navbar-scroller li.swiper-slide h2.heading {
  font-size:1rem;
  white-space:pre;
  font-family: var(--serif)
}
/* Change navbar items to hyperlink blue*/
.spin2scroller.spin-navbar-scroller .thumbs li h2 a {
  color: var(--interactblue)
}
/* Add pipes after navbar items except last item*/
.spin2scroller.spin-navbar-scroller li.swiper-slide:not(:last-child) h2.heading:after
 {
  content: '';
  border-right: 1px solid var(--darkgrey);
  padding-left: 1rem
}
/* Reduce gap and remove thick border between heading and navbar*/
.spin2scroller.spin-navbar-scroller .scrollHead,
.spin2scroller.spin-section-heading .scrollHead,
.spin2scroller.spin-section-subheading .scrollHead {
  padding-bottom:0;
  border-bottom: none
}
/* Remove border under navbar */
.spin2scroller.spin-navbar-scroller,
.spin2scroller.spin-section-heading,
.spin2scroller.spin-section-subheading {
  border-bottom: none;
  padding-bottom:0;
}
/** || Block and section headings || **/
/* Remove bottom border on Spin blocks that have section headings*/
.grid .spinBlock.hastitle.spin-section-heading .sectionhead,
.grid .htmlContent.sectionhead.spin-section-heading,
.grid .gridLayout.spin-section-heading .sectionhead {
  border-bottom: none;
  margin-bottom: 42px
}
/* Add border to top of section headings apart from first one in grid */
.grid>div:not(:first-child) .spin-section-heading {
  border-top: 1px solid var(--grey);
  padding-top: 1rem;
}

/* Boxed out spin items with headings*/
.grid .spinBlock.colour2.hastitle .sectionhead {
  border-bottom: 1px solid #888;
  background-color: var(--palegrey);
  margin-bottom: 0;
  padding: 10px 20px
}
.grid .spinBlock.colour2.hastitle .sectionhead h2 {
  font-size: 1rem;
  margin-bottom: 0;
  padding: 0;
}
/* Font styling for section headings in all contexts */
.htmlContent.spin-section-heading h2,
.gridLayout.spin-section-heading .sectionhead h2,
.spinBlock.hastitle.spin-section-heading .sectionhead h2,
.spinBlock.hastitle.spin-section-heading .sectionhead h2 a,
.spin2scroller.spin-section-heading.spin-navbar-scroller .sectionhead h2,
.spin2scroller.spin-section-heading .sectionhead h2,
.spin2scroller.spin-section-heading .sectionhead h2 a{
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2rem;
  text-transform:unset;
  padding-top:0
  }
@media screen and (min-width:1024px) {
  .htmlContent.spin-section-heading h2,
  .gridLayout.spin-section-heading .sectionhead h2,
  .spinBlock.hastitle.spin-section-heading .sectionhead h2,
  .spinBlock.hastitle.spin-section-heading .sectionhead h2 a,
  .spin2scroller.spin-section-heading.spin-navbar-scroller .sectionhead h2,
  .spin2scroller.spin-section-heading .sectionhead h2,
  .spin2scroller.spin-section-heading .sectionhead h2 a{
    font-size: 2rem
  }
} 
/* Section subheadings */
.grid .spinBlock.hastitle.spin-section-subheading .sectionhead,
.grid .gridLayout.spin-section-subheading .sectionhead,
.grid .spin2scroller.spin-section-subheading .scrollHead,
.grid .htmlContent.spin-section-subheading {
  border-bottom:1px solid var(--grey)
}
.htmlContent.spin-section-subheading h2,
.gridLayout.spin-section-subheading .sectionhead h2,
.spinBlock.hastitle.spin-section-subheading .sectionhead h2,
.spinBlock.hastitle.spin-section-subheading .sectionhead h2 a,
.spin2scroller.spin-section-subheading.spin-navbar-scroller .sectionhead h2,
.spin2scroller.spin-section-subheading .sectionhead h2,
.spin2scroller.spin-section-subheading .sectionhead h2 a {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 2rem;
    text-transform: unset;
    padding-top: 0;
    margin-bottom: 0.5rem;
}
@media screen and (min-width:1024px) {
  .spin-section-subheading.htmlContent h2,
  .spin-section-subheading.spin-navbar-scroller .sectionhead h2,
  .spin-section-subheading.gridLayout .sectionhead h2,
  .grid .spinBlock.hastitle.spin-section-subheading .sectionhead h2,
  .grid .spinBlock.hastitle.spin-section-subheading .sectionhead h2 a {
    font-size: 1.6rem;
  }
}
/* Hover style for section heading link */
.spin-section-heading h2 a:hover,
.spin-section-subheading h2 a:hover {
  color:var(--hoverblue)
}
/** || Text styling for stories || **/
/* Lighten titles in list layout */
@media screen and (min-width:1024px) {
.grid .spinLayout.list ul li h2 {
  font-weight: 400;
}
}
/* Force intro to show */
@media screen and (min-width:1024px) {
  #top .grid .spinBlock.spin-1024-show-intro .spinLayout.thumb >.sleeve p.intro {
    display:block
  }
  .spinBlock.spin-1024-show-intro .sleeve>.subSleeve {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
}
}
/* Add separator lines between stories*/
.spinBlock.spin-show-separator-lines .spinLayout:not(:last-child) {
  border-bottom:1px solid var(--palegrey)
}
/** || Reduce full/half width Spin blocks and grid layouts to thumbs on small screens || **/
@media screen and (max-width:767px) {
/* Text and spacing */
  .grid .column>* {
    margin-bottom:23px
  }

  .grid .spinLayout.full .intro,
  .grid .spinLayout.half .intro,
  .grid .gridLayout .intro {
    display: none;
  }
  .grid .spinLayout.full .meta,
  .grid .spinLayout.half .meta {
    margin-bottom: 0;
  }
  
  .grid .spinLayout.full .story-type,
  .grid .spinLayout.half .story-type{
    margin-bottom: 6px;
  }
/* Reduced image sizes for full/half layouts */  
  .grid .spinLayout.full .picture,
  .grid .spinLayout.half .picture{
    float: left;
    width: 100px;
    margin-right: 14px;
    margin-bottom: 0;
  }
/* Hide images for >=3 item in story list */
 .grid .columnTwo .spinBlock:not(.spin-section-columnist,.spin-section-heading,.spin-section-subheading,.spin-show-all-images) .spinLayout:not(:first-child) .picture {
    content-visibility:hidden;  
}
  .grid .columnThree .spinBlock:not(.spin-section-columnist,.spin-section-heading,.spin-section-subheading,.spin-show-all-images) .spinLayout .picture {
    content-visibility:hidden;
}

/* Equalise story title sizes on small screens*/
  .grid .spinLayout.full .sleeve h2,
  .grid .spinLayout.half .sleeve h2,
  .grid .spinLayout.thumb .sleeve h2 {
    font-size: 1rem;
    line-height: 1.266rem;
  }
  .grid .gridLayout ul li h2 {
    font-size: 1rem;
    line-height: 1.266rem;
	 margin-top: 8px;
  }
/* Padding around grid stories */  
  .grid .gridLayout ul li .subSleeve {
    padding: 0;
  }
  .grid .gridLayout .story-type {
    line-height:initial
  }
  .grid .gridLayout ul li:not(:last-child) {
    padding-bottom:23px
  }
/* Spin block stories have grey background and blue top border */  
  .grid .spinBlock:not(.colour2, .spin-section-columnist) .spinLayout .sleeve  {
    background-color: var(--palegrey);
    border-top:1px solid var(--interactblue);
    padding:4px;
    min-height:56px
  }
  .grid .spinBlock:not(.colour2, .spin-section-columnist) .spinLayout.list ul li,
  .grid .spinBlock:not(.colour2, .spin-section-columnist) .spinLayout.list ul li:first-child {
    background-color: var(--palegrey);
    border-bottom: none;
    border-top: 1px solid var(--interactblue);
    padding:4px;
    margin-bottom: 23px;
    min-height: 56px;
  }
  #top .grid .story-type .storyType {
    background:inherit
  }
}


@media screen and (max-width: 479px){
  /* Grid stories have grey background and blue top border */
  .grid .gridLayout ul li{
    background-color: var(--palegrey);
    border-bottom: none;
    border-top: 1px solid var(--interactblue);
    padding:4px;
    margin-bottom: 23px;
    min-height: 75px;
  }
  /* Reduce image size for grid stories */
  .grid .gridLayout ul li .picture {
    float: left;
    width: 100px;
    margin-right: 14px;
    margin-bottom: 0;
  }
  /* Hide images for >=3 item in grid story list */
  .grid .gridLayout:not(.spin-show-all-images) ul li:not(:nth-child(-n+3)) .picture {
    content-visibility:hidden;  
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .grid .gridLayout .story-type {
    margin-top:8px;
  }
}

/** | Branded spin block sections | **/
/* Branded image styling */
.spin-branded-section .inline_image {
  float:right;
  width:150px;
  margin-left:1rem
}
/** | Spin header blocks | **/
.spin-header.header-collections h1 {
  font-family: var(--serif);
  font-weight: 600
}
.spin-header.header-collections:not(.hasBackground) .spin-header-wrapper {
  border-bottom:1px solid var(--grey)
}
.spin-header.header-collections .spin-header-content .breadcrumb-link {
  background:none;
  font-weight: 400;
  font-family: var(--sans-serif);
  padding: 4px 0
}
.spin-header.header-collections .spin-header-content .breadcrumb-link:hover {
background-color: unset;
  color: var(--hoverblue);
}
.spin-header.header-collections .spin-header-content .breadcrumb-link:before {
  content: none
}
/* Popular/latest block, numbered bottom of page*/
#foot .grid {
  content-visibility:auto;
  contain-intrinsic-size: auto 900px
  }
#foot .grid .spin-popular-block {
  margin-top:2rem;
  min-height: 900px;
}
.spin-popular-block .tabbedblocks.mostThis .content ul li {
  min-height: 80px;
}
.spin-popular-block .tabbedblocks.mostThis .content ul li {
  width:100%;
  counter-increment:block-count;
  padding:12px 12px 12px 60px;
}
.spin-popular-block .tabbedblocks.mostThis .content ul li:before{
  content:counter(block-count);
  border-radius:unset;
  background-color:unset;
  position:absolute;
  top:20px;
  left:0;
  font-size:3rem;
  font-family:var(--serif)
  }
.spin-popular-block .tabbedblocks.mostThis .content ul li .text {
  font-size:1rem;
  line-height:1.5rem;
} 
@media screen and (min-width:768px) {
  #foot .grid {
    content-visibility:auto;
    contain-intrinsic-size: auto 500px
  }
  #foot .grid .spin-popular-block {
    min-height: 500px
  }
  
  .spin-popular-block .tabbedblocks.mostThis .content ul {
	 grid-template-columns: 1fr 1fr;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto auto auto auto;
    counter-reset:block-count;
  }
  .spin-popular-block .tabbedblocks.mostThis .content ul li:nth-child(2n) {
    margin-left: 0
  }
  .spin-popular-block .tabbedblocks.mostThis .content ul li:nth-child(n+6) {
    margin-left:1rem
  }
}
@media screen and (min-width:1024px) {
  #foot .grid .spin-popular-block {
	 min-height: 500px
  }
}
/** || Spin accordions and block selectors || **/
/* Spin accordion */
div[class*="spin-accordion-panel"]:not(.spin-accordion-active) {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out,border-color .3s ease-out;
    border: 1px solid transparent
}
.spin-accordion-trigger.spin-section-heading h2 {
cursor:pointer;
position:relative
}
.spin-accordion-trigger.spin-section-heading h2:after{
    content: "";
    transform: rotate(180deg);
    width: 3rem;
    height: 0.75rem;
    position: absolute;
    top: 0.5rem;
    right: 0;
    transform: rotate(0deg);
    transition: transform .25s;
    -webkit-clip-path: polygon(46.59% 4.45%,71.73% 100%,65.23% 100%,46.59% 30%,27.46% 100%,21.46% 100%);
    clip-path: polygon(46.59% 4.45%,71.73% 100%,65.23% 100%,46.59% 30%,27.46% 100%,21.46% 100%);
  background-color: var(--interactblue)
}

.spin-accordion-trigger.spin-section-heading h2.spin-accordion-active:after {
    transform: rotate(-180deg);
    transform-origin: center center;
	 background-color: var(--hoverblue)
}
.spin-accordion-trigger h2>span {
  pointer-events: none;
  color:var(--interactblue);
  display:block;
  font-family: var(--sans-serif);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: -1rem;
}
/* Spin selector */
div[class*="spin-selector-panel"]:not(.spin-selector-active) {
  display:none
}
ul.spin-selector-triggers {
  padding-left:0;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
ul.spin-selector-triggers li {
  list-style:none;
  font-size: 1.2rem;
  font-weight:700;
  color: var(--interactblue);
  cursor:pointer;
}
ul.spin-selector-triggers li:not(:last-child):after {
  content: "|";
  padding: 0 0.5rem;
  color:#888;
}
ul.spin-selector-triggers li.spin-selector-active {
  color: var(--hoverblue)
}
/** || Advertising || **/
/* Inline leaderboard */
.leaderboard.leaderboard-inline {
  padding: 0 0 1.15rem
}
.ad-ldrbrd.leaderboard-inline {
  min-height: calc(100px + 2.3rem)
}
@media screen and (min-width:1024px){
.ad-ldrbrd.leaderboard-inline {
    min-height: calc(250px + 2.3rem);
}
}
/* Call out block*/
.spin-callout-block {
background-color: #f1f0f0;
border-radius: 0.25rem;
padding: 1rem 1rem 2rem;
box-shadow: 0 1px 8px rgba(0,0,0,0.5);
border-bottom: 1px solid #dcdcdc;
}
.spin-callout-block .spin-callout-block_content h2 {
  color:#222;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2rem;
  padding-top: 0;
  padding-bottom: 0.5rem;
  border-bottom-color: #222;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
@media screen and (min-width:1024px) {
  .spin-callout-block .spin-callout-block_content h2 {
    font-size: 1.6rem;
  }
}
/* Spin filter table */
.spin-filter-table {
  position: relative;
  border-color:#888;
  border-width:1px;
  border-style:solid;
  }
  
.spin-filter-table_sleeve{
  height:200px;
  overflow-y:auto;
  width: 100%
}
.spin-filter-table_input {
  background-image: url(../svg/search_spyglass_icon_svg_962533.svg);
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
}

.spin-filter-table table {
  width: 100%;
  font-family: var(--sans-serif);
  margin-bottom:0;
  border-collapse: inherit;
  border-spacing: 0 0.5rem;
  padding: 0 0.5rem;

}
.spin-filter-table table tr {
  background-color:#fff;
  border-bottom: 1px solid #888
}

.spin-filter-table table tr:hover {
  background-color: #f1f1f1;
}
.spin-filter-table table th,
.spin-filter-table table p,
.spin-filter-table table td {
  vertical-align: middle;
  padding:0;
  font-size: 1rem;
  line-height: 1.2rem;
}
.spin-filter-table thead th:nth-of-type(n+2),
.spin-filter-table tr td:nth-of-type(n+2) {
  padding-left: 0.5rem
}
.spin-filter-table-hide {
  display: none;
}
/* Make position relative */
.spin-position-relative {
position:relative;
}