@font-face{font-family:'Guardian Text Egyptian Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Regular.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Regular.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Regular.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Regular.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Regular.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Regular.svg#GuardianTextEgyptianWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Text Egyptian Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-RegularItalic.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-RegularItalic.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-RegularItalic.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-RegularItalic.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-RegularItalic.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-RegularItalic.svg#GuardianTextEgyptianWeb-RegularItalic') format('svg');font-weight:400;font-style:italic;font-stretch:normal}@font-face{font-family:'Guardian Text Egyptian Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Medium.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Medium.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Medium.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Medium.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Medium.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextEgyptianWeb/GuardianTextEgyptianWeb-Medium.svg#GuardianTextEgyptianWeb-Medium') format('svg');font-weight:700;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Egyptian Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Light.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Light.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Light.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Light.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Light.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Light.svg#GuardianEgyptianWeb-Light') format('svg');font-weight:200;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Egyptian Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.svg#GuardianEgyptianWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Egyptian Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.svg#GuardianEgyptianWeb-Medium') format('svg');font-weight:500;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Egyptian Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.svg#GuardianEgyptianWeb-Semibold') format('svg');font-weight:900;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Text Sans Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Regular.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Regular.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Regular.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Regular.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Regular.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Regular.svg#GuardianTextSansWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Text Sans Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-RegularItalic.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-RegularItalic.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-RegularItalic.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-RegularItalic.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-RegularItalic.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-RegularItalic.svg#GuardianTextSansWeb-RegularItalic') format('svg');font-weight:400;font-style:italic;font-stretch:normal}@font-face{font-family:'Guardian Text Sans Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Medium.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Medium.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Medium.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Medium.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Medium.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianTextSansWeb/GuardianTextSansWeb-Medium.svg#GuardianTextSansWeb-Medium') format('svg');font-weight:700;font-style:normal;font-stretch:normal}@font-face{font-family:'Guardian Sans Web';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianSansWeb/GuardianSansWeb-Regular.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianSansWeb/GuardianSansWeb-Regular.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianSansWeb/GuardianSansWeb-Regular.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianSansWeb/GuardianSansWeb-Regular.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianSansWeb/GuardianSansWeb-Regular.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianSansWeb/GuardianSansWeb-Regular.svg#GuardianSansWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal} @font-face{font-family:'Guardian Agate Sans';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Regular.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Regular.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Regular.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Regular.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Regular.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Regular.svg#Guardian-Text-Egyp-Web-Reg') format('svg');font-weight:normal;font-style:normal;font-stretch:normal;}@font-face{font-family:'Guardian Agate Sans';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-RegularItalic.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-RegularItalic.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-RegularItalic.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-RegularItalic.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-RegularItalic.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-RegularItalic.svg#Guardian-Text-Egyp-Web-Reg-It') format('svg');font-weight:normal;font-style:italic;font-stretch:normal;}@font-face{font-family:'Guardian Agate Sans';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Bold.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Bold.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Bold.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Bold.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Bold.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-Bold.svg#Guardian-Text-Egyp-Web-Medium') format('svg');font-weight:bold;font-style:normal;font-stretch:normal;}@font-face{font-family:'Guardian Agate Sans';src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-BoldItalic.eot');src:url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-BoldItalic.eot?#iefix') format('embedded-opentype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-BoldItalic.woff2') format('woff2'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-BoldItalic.woff') format('woff'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-BoldItalic.ttf') format('truetype'),url('https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianAgateSans1Web/GuardianAgateSans1Web-BoldItalic.svg#Guardian-Text-Egyp-Web-Med-It') format('svg');font-weight:bold;font-style:italic;font-stretch:normal;}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

html, body {
  text-align: left;
  padding: 0;
  margin: 0;
  color: #333;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

.transition {
  transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

select:focus { outline: none; }

a {
  color: #005689;
}

#phonedummy { display: block; height: 0; width: 0; }

.mobile-hide {
  display: none;
}

.mobile-show {
  display: inline;
}

#wrapper {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
}


/*.shareButtons button#shareTwitter {
    background: url("../images/twitterIcon.svg") no-repeat scroll center center #03b3ee;
}
.shareButtons button#shareFacebook {
    background: url("../images/facebookIcon.svg") no-repeat scroll center center #3067A3;
}
.shareButtons button#sharePinterest {
    background: url("../images/pinterestIcon.svg") no-repeat scroll center center #B9252C;
}
.shareButtons button#shareTumblr {
    background: url("../images/tumblrIcon2.svg") no-repeat scroll center center #36465D;
}
.shareButtons button {
    margin-right: 2px;
}
.shareButtons button {
    background: none repeat scroll 0 0 #333;
    background-size: 32px;
    border: medium none;
    border-radius: 9000px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    height: 32px;
    margin-bottom: 5px;
    outline: medium none;
    vertical-align: top;
    width: 32px;
}

.shareButtons button:hover {
  
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

.shareButtons {
    font-size: 0;
    color: #767676;
    font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 14px;
    position: absolute;
    right: 0;
    bottom: -60px;
    margin-right: 20px;
    display: none;
}

.shareButtons p {
    text-align: left;
    padding-bottom: 10px;
    white-space: nowrap;
}*/




#header {
  position: relative;
  height: 0px;
  margin-bottom: 15px;
  font-family: "Guardian Egyptian Web", Georgia, serif;
   font-size: 16px;
   color: #767676;
   border-top: 1px solid #767676;
}

#wrapper.filterable #header {
  height: 50px;
  margin-bottom: 5px;
}

#header #filter-block {
  position: absolute;
  right: 0;
  bottom: 5px;
  color: #767676;
}

#header .styled-select {
  float: right;
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url("../images/dropdown.gif") no-repeat 208px #fff;
   border: 1px solid #767676;
   border-radius: 17px;
}

#header .styled-select:hover {
   background: url("../images/dropdown-white.png") no-repeat 208px #767676;
}

#header .styled-select:hover #filter {
  color: #fff;
}

#header #filter {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   line-height: 1.3em;
   color: #767676;
   font-weight: 600;
   cursor: pointer;
}

  #header #filter option {
   padding: 10px;
   border-bottom: 1px solid #767676;
   font-weight: 400;
   color: #767676;
   background: #fff;
   }

   #header #filter option.separator {
   border-bottom: 4px solid #767676;
   }


#grid {
  width: 105%;
  width: -webkit-calc(100% + 12px);
  width: -moz-calc(100% + 12px);
  width: calc(100% + 12px);
}

#grid ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.cell {
  position: relative;
  float: left;
  width: 50%;
  padding-bottom: 50%;
  height: 80px;
  vertical-align: top;
  font-family: "Guardian Egyptian Web", Georgia, serif;
}

.cell .cell-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 12px;
  bottom: 12px;
  cursor: pointer;
  border-top: 1px solid #000;
}

.cell .cell-number {
  display: none;
}

.cell .cell-inner, .cell .cell-number {
  background: #005689;
  border-color: #005689;
  color: #fff;
}

.cell.selected .cell-inner, .cell.selected .cell-number {
  background: #4bc6df;
  border-color: #4bc6df;
  color: #fff;
  cursor: default;
}

.cell.deselected .cell-inner, .cell.deselected .cell-number {
  background: #BDBDBD;
  border-color: #BDBDBD;
  color: #fff; 
}

.cell.inactive .cell-inner, .cell.inactive .cell-number {
  background: #dcdcdc;
  border-color: #dcdcdc;
  color: #fff;
  cursor: default;
}

.cell .cell-inner:hover .cell-image-wrapper img {
  opacity: 0.8;
}

.cell.selected .cell-inner:hover .cell-image-wrapper img {
  opacity: 1;
}

.cell.inactive .cell-inner:hover .cell-image-wrapper img {
  opacity: 0.3;
}


.cell.inactive .cell-inner img {
  background: #dcdcdc;
  opacity: 0.3;
}

.cell .cell-image-wrapper {
  position: relative;
  padding-bottom: 100%;
  width: 100%;
  background: #333;
}

.cell.inactive .cell-image-wrapper {
  background: #fff;
}

.cell .cell-image-wrapper img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  opacity: 1;
}

.cell.inactive .cell-image-wrapper img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
  opacity: 0.3;
}

.cell.deselected .cell-image-wrapper img {
  opacity: 0.9;
}

.cell-number {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 20px;
  height: 20px;
  padding: 5px;
  color: #fff;
  text-align: center;
  font-weight: 400;
  font-size: 22px;
}

.cell-info {
  padding: 5px;
  font-size: 15px;
  line-height: 1.15em;
}

.cell-info h3 {
  font-weight: 400;
  padding-bottom: 3px;
}

.cell .cell-inner:hover .cell-info h3 {
  text-decoration: underline;
}

.cell.inactive .cell-inner:hover .cell-info h3, .cell.selected .cell-inner:hover .cell-info h3 {
  text-decoration: none;
}

.cell-info p {
  font-weight: 300;
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.05em;
}

#info-panel {
  position: relative;
  height: auto;
  width: 100%;
  float: left;
  background: #fff;
  overflow: hidden;
  /*opacity:0;
  filter:alpha(opacity=0);  For IE8 and earlier */
  margin-bottom: 20px;
  border-bottom: 1px solid #dcdcdc;
  vertical-align: top;
}

#info-dummy {
  position: relative;
  width: 100%;
  height: 0;
  float: left;
  background: #ff0000;
  overflow: hidden;
  /*opacity:0;
  filter:alpha(opacity=0);  For IE8 and earlier */
  /*margin-bottom: 20px;*/
}

#info-panel #info-panel-inner {
  position: relative;
  height: auto;
  width: 100%;
  font-family: "Guardian Egyptian Web", Georgia, serif;
  font-weight: 300;
  vertical-align: top;
}

#info-panel .main-image-holder {
  position: relative;
  float: left;
  width: 100%;
  margin-top: 60px;
}

#info-panel .main-image-holder-inner {
  position: relative;
  width: 100%;
  background: #dcdcdc;
}

#info-panel .main-image-holder-inner .main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
}

#info-panel #info-panel-inner .info {
  width: 95%;
  float: left;
}

 #info-panel #info-panel-inner .info.info-rule {
  margin-top:12px;
}

#info-panel #info-panel-inner h1.rank {
 font-size: 60px;
}

#info-panel h2.heading {
line-height: 1.1em;
color: #4bc6df;
font-size: 16px;
}

#info-panel .subheading {
 line-height: 1.1em;
 font-size: 16px;
  color: #767676;
}

#info-panel .subsubheading {
 line-height: 1.1em;
 font-size: 16px;
  color: #767676;
}

#info-panel .maintext {
display: block;
margin-top: 12px;
line-height: 1.2em;
font-size: 14px;
 color: #767676;
}

#info-panel .byline {
}

#info-panel .credit {
}

#info-panel .clear {
clear: both;
}

#info-panel .nav-button {
  position: absolute;
  top: 2px;
  cursor:pointer;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #000;
  opacity:0.5;
  filter:alpha(opacity=70); /* For IE8 and earlier */
}

#info-panel .nav-button:hover {
  opacity:0.6;
  filter:alpha(opacity=100); /* For IE8 and earlier */
}

#info-panel #nav-next {
  right: 79px;
  background-image: url("../images/right-arrow-44.png");
}

#info-panel #nav-previous {
  right: 138px;
  background-image: url("../images/left-arrow-44.png");
}

#info-panel #nav-top {
  left: 50%;
  margin-left: -29px;
  top: auto !important;
  bottom: 12px;
  background-image: url("../images/up-chevron-44.png");
}

#info-panel #close-button {
  right: 20px;
  background-image: url("../images/close-44.png");
}


/* BREAKPOINTS */

@media screen and (min-width: 460px) { /* Mobile landscape breakpoint - fluid width */

  .cell {
    width: 33.3333333333%;
    padding-bottom: 33.3333333333%;
  }

  .hierarchical .cell:nth-of-type(1), .hierarchical .cell:nth-of-type(2) {
    width: 50%;
    padding-bottom: 50%; 
  }
  
  #info-panel #info-panel-inner h1.rank {
 font-size: 60px;
}

#info-panel h2.heading {
font-size: 18px;
font-weight: 600;
}

#info-panel .subheading {
 font-size: 16px;
 font-weight: 400;

}

#info-panel .subsubheading {
 font-size: 16px;
 font-weight: 400;
}

#info-panel .maintext {
font-size: 15px;
color: #767676;
}

  .cell-info {
  font-size: 16px;
}
  
}

@media screen and (min-width: 700px) { /*  Tablet portrait breakpoint (9 cols - 60px x 36px, 20px + 12px margins) */

.cell {
    width: 25%;
    padding-bottom: 25%;
  }

.hierarchical .cell:nth-of-type(3), .hierarchical .cell:nth-of-type(4), .hierarchical .cell:nth-of-type(5) {
    width: 33.3333333333%;
    padding-bottom: 33.3333333333%;  /* 276px + 12px bottom margin */
  }
  
}

@media screen and (min-width: 860px) { /*  Tablet portrait breakpoint (11 cols - 60px x 36px, 20px + 12px margins) */

  .cell {
    width: 20%;
    padding-bottom: 20%;
  }

  .hierarchical .cell:nth-of-type(1), .hierarchical .cell:nth-of-type(2), .hierarchical .cell:nth-of-type(3) {
    width: 33.3333333333%;
    padding-bottom: 33.3333333333%;
  }

  .hierarchical .cell:nth-of-type(4), .hierarchical .cell:nth-of-type(5), .hierarchical .cell:nth-of-type(6), .hierarchical .cell:nth-of-type(7) {
     width: 25%;
    padding-bottom: 25%;
  }
  
  #info-panel .main-image-holder {
  position: relative;
  float: left;
  width: 66%;
  margin-top: 70px;
}
  
 #info-panel #info-panel-inner .info {
  width: 30%;
  width: calc(33% - 30px);
  float: right;
  padding-right: 30px;
}

 #info-panel #info-panel-inner .info.info-rule {
  margin-top: 60px;
  margin-bottom: 12px;
  border-top: 1px solid #dcdcdc;
}
  
}

@media screen and (min-width: 1020px) { /*  Desktop breakpoint (13 cols - 60px x 36px, 20px + 12px margins) */


.cell {
    width: 16.66666666666667%;
    padding-bottom: 16.66666666666667%;
  }

.hierarchical .cell:nth-of-type(8), .hierarchical .cell:nth-of-type(9), .hierarchical .cell:nth-of-type(10), .hierarchical .cell:nth-of-type(11), .hierarchical .cell:nth-of-type(12) {
     width: 20%;
    padding-bottom: 20%;
  }

.hierarchical .cell:nth-of-type(4), .hierarchical .cell:nth-of-type(5), .hierarchical .cell:nth-of-type(6), .hierarchical .cell:nth-of-type(7) {
     width: 25%;
    padding-bottom: 25%;
  }

.hierarchical .cell:nth-of-type(1), .hierarchical .cell:nth-of-type(2), .hierarchical .cell:nth-of-type(3) {
    width: 33.3333333333%;
    padding-bottom: 33.3333333333%;
  }
  
 #info-panel #info-panel-inner h1.rank {
 font-size: 80px;
}

#info-panel h2.heading {
font-size: 24px;
}

#info-panel .subheading {
 font-size: 20px;
}

#info-panel .subsubheading {
 font-size: 20px;
}

#info-panel .maintext {
font-size: 16px;
}
  
}

@media screen and (min-width: 1260px) { /*  Desktop wide breakpoint (16 cols - 60px x 36px, 20px + 12px margins) */

.cell {
     width: 14.28571428571428%;
    padding-bottom: 14.28571428571428%;
  }

.hierarchical .cell:nth-of-type(10), .hierarchical .cell:nth-of-type(11), .hierarchical .cell:nth-of-type(12), .hierarchical .cell:nth-of-type(13), .hierarchical .cell:nth-of-type(14), .hierarchical .cell:nth-of-type(15) {
    /* width: 16.66666666666667%; this was for six in a row
    padding-bottom: 16.66666666666667%;*/
     width: 14.28571428571428%;
    padding-bottom: 14.28571428571428%;

  }

.hierarchical .cell:nth-of-type(16), .hierarchical .cell:nth-of-type(17), .hierarchical .cell:nth-of-type(18), .hierarchical .cell:nth-of-type(19), .hierarchical .cell:nth-of-type(20), .hierarchical .cell:nth-of-type(21), .hierarchical .cell:nth-of-type(22) {
     width: 14.28571428571428%;
    padding-bottom: 14.28571428571428%;
}

.hierarchical .cell:nth-of-type(5), .hierarchical .cell:nth-of-type(6), .hierarchical .cell:nth-of-type(7), .hierarchical .cell:nth-of-type(8), .hierarchical .cell:nth-of-type(9) {
     width: 20%;
    padding-bottom: 20%;
  }

.hierarchical .cell:nth-of-type(1), .hierarchical .cell:nth-of-type(2), .hierarchical .cell:nth-of-type(3), .hierarchical .cell:nth-of-type(4) {
     width: 25%;
    padding-bottom: 25%;
  }
  
}