﻿/*$black: #ff00ff;*/
/*#909090 gray*/
/*$heroareaheight: 630px;*/
.vertcentre {
  position: relative;
  top: 51%;
  transform: translateY(-50%); }

.round, #article-grid a.grid-item, #article-grid a.grid-item .mainImageContainer img.mainImage {
  /*disabled for now*/
  /*border-radius: 1em;
    -webkit-border-radius: 1em;*/ }

.pinkText {
  color: #333; }

.fullWidthDivide {
  border-bottom: solid 1px #333; }

.fullWidthDivideTopBottom {
  border-top: solid 1px #333;
  border-bottom: solid 1px #333; }

.unselectable {
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  -o-user-select: none;
  user-select: none; }

/*FONTS*/
@font-face {
  font-family: 'Graphik SemiBold';
  src: url("/fonts/commercial-type-1507-MFFFKX-web/Graphik-Semibold-Web.eot");
  src: url("/fonts/commercial-type-1507-MFFFKX-web/Graphik-Semibold-Web.eot?#iefix") format("embedded-opentype"), url("/fonts/commercial-type-1507-MFFFKX-web/Graphik-Semibold-Web.woff") format("woff"), url("/fonts/commercial-type-1507-MFFFKX-web/Graphik-Semibold-Web.ttf") format("truetype"), url("/fonts/commercial-type-1507-MFFFKX-web/Graphik-Semibold-Web.svg#Graphik-Semibold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal; }

.BaskervilleRegular, #article-grid a.grid-item .infocontainer .summary, a.grid-itemdivider .infocontainer .summary {
  font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif; }

.GraphikSemiBold, #article-grid a.grid-item .infocontainer .title, a.grid-itemdivider .infocontainer .title {
  font-family: 'Graphik SemiBold'; }

#article-grid {
  max-width: 954px;
  margin: 0px auto 0px auto;
  padding: 0px 10px;
  min-width: 740px;
  text-align: center; }
  #article-grid a:hover {
    text-decoration: none; }
  #article-grid .grid-item.minimodule {
    display: inline-block;
    margin-bottom: -53px;
    /*So the next articles in the grid pad against the  article items above, not the minimodules*/ }
  #article-grid a.grid-item {
    width: 280px;
    display: inline-block;
    position: relative;
    background: url(/images/ajax-loader2.gif) no-repeat center 40%;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
    margin: 0px 14px 79px 14px; }
    #article-grid a.grid-item[data-hasvideo=True] {
      background: none; }
    #article-grid a.grid-item video {
      background-color: transparent; }
    #article-grid a.grid-item .mainImageContainer {
      min-height: 210px;
      overflow: hidden;
      width: 280px;
      max-width: 280px;
      object-fit: cover; }
      #article-grid a.grid-item .mainImageContainer img.mainImage {
        max-width: 280px;
        height: 210px;
        display: none;
        object-fit: cover; }
      #article-grid a.grid-item .mainImageContainer .videoloop {
        height: 210px;
        max-height: 210px;
        width: 280px;
        max-width: 280px;
        object-fit: cover;
        background-color: transparent; }
        #article-grid a.grid-item .mainImageContainer .videoloop .vjs-loading-spinner {
          display: none; }
      #article-grid a.grid-item .mainImageContainer.loaded img.mainImage {
        display: block; }
    #article-grid a.grid-item a.grid-item img:hover {
      opacity: 1; }
    #article-grid a.grid-item .infocontainer {
      height: 104px;
      text-align: center;
      vertical-align: top;
      position: relative;
      top: 12px;
      /*Required because of line-height padding lameness*/
      /*5px*/ }
      #article-grid a.grid-item .infocontainer .title {
        font-weight: bold;
        vertical-align: top;
        font-size: 17px;
        padding: 0px 5px; }
      #article-grid a.grid-item .infocontainer .summary {
        font-size: 17.5px;
        line-height: 21px;
        vertical-align: top;
        padding: 0px 5px 5px 5px; }
    #article-grid a.grid-item .loaded img {
      display: block; }
    #article-grid a.grid-item .loaded video {
      display: block; }
    #article-grid a.grid-item .loaded .playoverlay {
      /*139x100*/
      /*27x30*/
      left: 126px;
      top: 85px;
      display: block; }
    #article-grid a.grid-item.w2 {
      width: 428px;
      max-width: 428px; }
      #article-grid a.grid-item.w2 .mainImageContainer {
        min-height: 321px;
        vertical-align: middle;
        overflow: hidden;
        width: 428px;
        max-width: 428px;
        position: relative; }
      #article-grid a.grid-item.w2 img.mainImage {
        width: 428px;
        max-width: 428px;
        height: 321px;
        max-height: 321px; }
      #article-grid a.grid-item.w2 .videoloop {
        max-width: 428px;
        width: 428px;
        height: 321px;
        max-height: 321px; }
      #article-grid a.grid-item.w2 .loaded .playoverlay {
        /*431x310*/
        /*27x30*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        display: block; }
      #article-grid a.grid-item.w2 .loaded img {
        display: block; }
      #article-grid a.grid-item.w2 .loaded video {
        display: block; }

a.grid-itemdivider {
  width: 201px;
  display: inline-block;
  position: relative;
  background: url(/images/ajax-loader2.gif) no-repeat center 30%;
  overflow: hidden;
  text-align: center;
  vertical-align: top;
  margin: 56px 14px 56px 14px; }
  a.grid-itemdivider img.mainImage {
    min-width: 1px;
    max-width: 200px;
    height: 150px;
    display: none; }
  a.grid-itemdivider .infocontainer {
    text-align: center;
    vertical-align: top;
    font-size: 17.5px;
    padding-top: 10px; }
    a.grid-itemdivider .infocontainer .title {
      font-weight: bold;
      font-size: 15px;
      line-height: 18px;
      vertical-align: top;
      padding: 5px 2px 0px 2px; }
    a.grid-itemdivider .infocontainer .summary {
      font-size: 17.5px;
      line-height: 21px;
      padding-top: 5px;
      vertical-align: top;
      line-height: 21px;
      padding: 3px 2px 5px 2px; }
  a.grid-itemdivider.loaded img {
    display: block; }
  a.grid-itemdivider.loaded video {
    display: block; }

.gridcontainer {
  width: 100%;
  background-color: white; }

.gridMiniModules {
  display: none; }

