/* ---------- reset browser defaults ---------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 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, input, select, hr {
margin:0;
padding:0;
font-size:1em;
}
body {
     background-color: #fff;
     color: #4a4949;
     font: 85% Circular,Arial,sans-serif;
     text-align: center;
}

/* Remove default browser styles */
body input[type="search"],
body input[type="submit"]{ -webkit-appearance: none;}


@font-face {
	font-family:"Circular";
	src:url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-book-eot.eot");
	src:url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-book-eot.eot?#iefix") format("embedded-opentype"),url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-book-woff.woff") format("woff");
	font-weight:normal;
	font-style:normal
}
@font-face {
	font-family:"Circular";
	src:url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-medium-eot.eot?#iefix") format("embedded-opentype"),url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-medium-woff.woff") format("woff");
	font-weight:500;
	font-style:normal
}
@font-face {
	font-family:"Circular";
	src:url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-bold-eot.eot");
	src:url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-bold-eot.eot?#iefix") format("embedded-opentype"),url("/SiteElementsHomepage/css/fonts/lineto-circular-pro-bold-woff.woff") format("woff");
	font-weight:bold;
	font-style:normal
}
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html {
	font-family:sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%
}

img, embed, form, fieldset {
     border: 0px none;
     vertical-align: bottom;
}

input, select, textarea {
     vertical-align: bottom;
     font-family: "Circular";
}
* {
  box-sizing: border-box;
}

body{background: #fff;}




.secondaryLogo{padding: 20px; text-align:left; background: #efefef; position:absolute; margin-left: 14.5%; margin-right: 36%;}
.secondaryLogo img{ border: 4px solid #fff;float:left;display:inline-block; width: 30%;padding-bottom: 20px; margin-right: 3%;}
.secondaryLogo .introText{display:inline-block; width: 64%; text-align:left;}
.secondaryLogo p:last-child{padding-bottom: 0; margin-bottom: 0;}


.contentWrapper.breadcrumb{font-size: 1.2em; line-height: 1.5em;}
.contentWrapper.breadcrumb a{margin: 0 3px 0 0;display:inline-block;font-weight:normal; background-color: #18194f; border: 2px solid transparent; padding: 2px 10px; color: #fff; text-decoration:none;}
.contentWrapper.breadcrumb a:hover{text-decoration:none; color: #18194f; background: transparent; border-color: #18194f;}
.contentWrapper.breadcrumb span{font-size: 1.1em; color: #007ca7;}
.contentWrapper.breadcrumb div::before{content: "You're here: "; display:block-inline; margin-right: 6px; background-color: #007ca7; border: 2px solid transparent; padding: 4px 10px; color: #fff;}
.contentWrapper.breadcrumb span span{color: #18194f;}



h1{font-size: 3.375rem; line-height: 3.75rem;}
h2{font-size: 1.75rem; line-height: 2.125rem; margin-bottom: 0.9375rem;}
h3{font-size: 1.4375rem; line-height: 1.8125rem; }
h4 {font-size: 1rem; line-height: 1.375rem;}
h5, h6 {font-size: 1rem; line-height: 1.375rem;}

h2, h3, h4, h5, h6 {color: #18194f; padding-top: 1.25rem;  margin-bottom: 0.9375rem;}

h2 span{font-family:arvo; color: #007ca7;}

p{margin-bottom: 1rem;}


#headerArea{position:relative; margin: 0px auto 3rem 0px; text-align:left;}
#headerArea img{}

#pageTitle{padding: 1rem 2rem; height: 90px; position:absolute; top: 0; right: 0; background: #18194f;  color: #fff; font-size: 3.375rem; line-height: 3.75rem;}


.contentWrapper{margin: 0px auto; padding: 0 18px; max-width: 1250px; text-align:left; font-size: 1.2rem; line-height: 1.6rem;}



.videoContainer {
    position: relative;
    overflow: hidden;
    padding-top: 61.5%;
    margin: 1em 0;}

.videoIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;}


.sys_detailImage,
.sys_detailImage .contentWrapper{height: 460px; background-repeat:no-repeat;}

.sys_detailImage {position:relative; margin-bottom: 1em; background-size: cover; background-position: 50%;}

.sys_detailImage .individualElement{position:absolute; left: 0; background: #fff; bottom: 0; height: auto; padding: 1rem 12px; max-width: 80%;}

.sys_detailImage .individualElement h1,
.sys_detailImage .individualElement h2{color: #18194f; margin: 0; font-size: 4rem; display:inline-block;}
.sys_detailImage .individualElement h1 a{color: #005597;}
.sys_detailImage img{width: 100%; height: auto;}
.sys_detailImage .elementCode{display:inline-block; color: #18194f; font-size: 4.5rem; font-weight:500;}
.sys_detailImage .elementCode abbr{text-decoration:none; padding: 12px 0; display:block;}

.sys_detailImage .contentWrapper{margin: 0px auto; max-width: 1250px; position:relative;}

.individualElement {position:relative;}
.individualElement .elementCode{background: #1a296b; padding: 8px 20px; width: auto; left: 10px;  bottom: 10px; top: 10px; right: auto; margin-right: 10px; color: #fff; font-size: 4rem; line-height: auto; font-weight:500; font-family:arvo;} 
.individualElement .elementCode abbr{text-decoration:none;}

.introParagraph{font-size: 1.6em; color: #18194F; font-weight:normal;}

.periodic-table {
  margin: 0 1.5rem;
  display: grid;
  grid-column-gap: .5vw;
  grid-row-gap: .5vw;
  padding-left: 0;}

.periodic-table > li {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 4.5vw;
  font-weight: bold;
  border-radius: 3px;}

.periodic-table .backgroundImage {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-position: 50%;
  background-size: cover;
  background-repeat:no-repeat;
  -webkit-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */}




.showhideNottinghamtName{color: #fff;}

.periodic-table > li .showhideElementName{visibility:hidden; font-size: 0.7vw;}

.periodic-table > li a{text-decoration:none; border: 2px solid transparent; background: rgba(24, 25, 79, 0.95); position:absolute; left: 0; right: 0; top: 0; bottom: 0;}

.periodic-table > li a span{
  counter-increment: element; 
  content: counter(element);
  position: absolute;
  bottom: 5px;
  left: 6px;
  font-size: 10px;
  color: #fff;
  font-weight: normal;}

.periodic-table > li abbr {text-decoration:none; font-size: 2.3vw; color: #fff;}
#helium {grid-column-start: 18;}
#boron, #aluminium {grid-column-start: 13;}
#cerium, #thorium {grid-column-start: 4;}
.periodic-table > li:nth-child(n+58):nth-last-child(n+48) {grid-row-start: 8;}
.periodic-table > li:nth-child(n+90):nth-last-child(n+16) {grid-row-start: 9;}

.periodic-table:before {
  display: block;
  content: '';
  grid-row: 8 / 10;
  grid-column: 1 / 4;
}




.periodic-table > li:hover span,
.periodic-table > li a:focus span, 
.periodic-table > li a:active span{display:none;}

.periodic-table > li:hover .showhideElementName,
.periodic-table > li a:focus .showhideElementName, 
.periodic-table > li a:active .showhideElementName{visibility:visible;}

.periodic-table > li:hover a,
.periodic-table > li:focus a,
.periodic-table > li:active a{transform: scale(1.25); z-index: 1000; border-color: #18194f; background: rgba(255, 255, 255, 1);}

.periodic-table > li:hover .showhideElementName,
.periodic-table > li:focus a .showhideElementName, 
.periodic-table > li:active a .showhideElementName,
.periodic-table > li a:focus .showhideElementName, 
.periodic-table > li a:active .showhideElementName{color: #007ca7;}

.periodic-table > li:hover abbr,
.periodic-table > li:focus a abbr, 
.periodic-table > li:active a abbr,
.periodic-table > li a:focus abbr, 
.periodic-table > li a:active abbr{color: #18194f;}

.periodic-table > li a:focus,
.periodic-table > li a:active{transform: scale(1.25); z-index: 1000; border-color: #18194f; background: rgba(255, 255, 255, 1);}




.individualElement .elementCode.unknown{background: #efefef;}
.individualElement .elementCode.noble-gas{background: #1a296b;}
.individualElement .elementCode.diatomic-nonmetal{background: #92918e;}
.individualElement .elementCode.alkali{background: #18194f;}
.individualElement .elementCode.hydrogen{background: #a3c7d2;}
.individualElement .elementCode.alkaline{background: #dadada;}
.individualElement .elementCode.lanthanide{background: #009bbd;}
.individualElement .elementCode.actinide{background: #005597;}
.individualElement .elementCode.metalloid{background: #007ca7;}
.individualElement .elementCode.polyatomic-non-metal{background: #DE1B5C;}



.individualElement .elementCode.alkaline abbr,
.alkaline .showhideNottinghamtName,
.individualElement .elementCode.unknown abbr,
.unknown .showhideNottinghamtName{color: #18194f;}

.individualElement .elementCode.noble-gas abbr,
.noble-gas .showhideNottinghamtName,
.individualElement .elementCode.noble-gas  abbr,
.elementCode.noble-gas .showhideNottinghamtName,
.individualElement .elementCode.metalloid abbr,
.metalloid .showhideNottinghamtName,{color: #fff;}



/* OPTION TWO */

.periodic-table .noble-gas a {background: rgba(26, 41, 107, 0.9);}
.periodic-table .diatomic-nonmetal a {background: rgba(146, 145, 142, 0.9);}
.periodic-table .alkali a {background: rgba(24,25,79,0.9);}
.periodic-table .hydrogen a {background: rgba(163, 199, 210, 0.9);}
.periodic-table .alkaline a {background: rgba(218, 218, 218, 0.9);}
.periodic-table .alkaline a span, .periodic-table .alkaline a abbr{color: #18194f;}
.periodic-table .unknown a {background: rgba(239, 237, 237, 0.9);}
.periodic-table .unknown a span, .periodic-table .unknown a abbr{color: #18194f;}
.periodic-table .lanthanide a {background: rgba(0, 155, 189, 0.9);}
.periodic-table .actinide a {background: rgba(0, 85, 151, 0.9); }
.periodic-table .metalloid a {background: rgba(0, 124, 167, 0.9);}
.periodic-table .polyatomic-non-metal a {background: rgba(179, 43, 118, 0.9);}




.styledLink a,
.CTA{background-image: url("/siteelements/images/base/internal/cta-icons/white/bg-icon-white-right-arrow.png");
  font-weight:bold; 
  font-size: 1.2rem;
  display:inline-block; 
  text-decoration:none; 
  height: auto; 
  clear:both;
  background-color: #007ca7;
  color: #fff; 
  text-align:left; 
  padding: 20px 60px 20px 8px; 
  background-size: 18px auto; 
  background-position: right 10px top 50%; 
  background-repeat:no-repeat; 
  margin-bottom:1rem;
  border: 2px solid transparent; }

.styledLink a:hover,
.CTA:hover{background-color: transparent; color: #18194f; border-color: #18194f; text-decoration:none; background-image: url("/siteelements/images/base/internal/cta-icons/Colour/bg-icon-blue5-right-arrow.png");}

.footer{background: #efefef; margin: 0; padding: 6px;}
.footer img{width: 340px; text-align:center;}





@media all and (max-width: 1200px) {
#pageTitle{font-size: 2.375rem; line-height: 3.75rem;}
  
.periodic-table > li abbr {font-size: 1rem;}
  
  .secondaryLogo{padding: 10px; margin-left: 13.5%; margin-right: 35%;}
.secondaryLogo img{width: 28%; padding-bottom: 10px; margin-right: 2%;}
.secondaryLogo .introText{width: 69%;}

  
}


@media all and (max-width: 967px) {
  
.secondaryLogo{background: #efefef; position:relative; margin: 0 auto 1.5rem auto;}
.secondaryLogo img{width: 280px; margin: auto auto;}


.secondaryLogo{padding: 10px; margin-left: 13.5%; margin-right: 35%;}
.secondaryLogo img{width: 28%; padding-bottom: 10px; margin-right: 2%;}
.secondaryLogo .introText{width: 69%;}
 
  
  
#pageTitle{font-size: 1.575rem; line-height: 3.85rem;}
  
  
.sys_detailImage .individualElement h1,
.sys_detailImage .individualElement h2{font-size: 3rem; max-width: 80%;}
.sys_detailImage .individualElement .elementCode{font-size: 3rem;}

.sys_detailImage img{width: 140%; height: auto;}

  
body .periodic-table li{padding: 3rem 1rem; margin: 2px;}
body .periodic-table li abbr{font-family:arvo; font-size: 2rem; display:block; visibility:visible; }
body .periodic-table li abbr::after{display:block; font-family:circular; font-size: 1.4rem;}
body .periodic-table li .elementCode{visibility: visible;}
body .periodic-table li .showhideElementName{display:none; font-size: inherit;}
body .periodic-table li .showhideElementName:hover{display:none;}

  
  
.periodic-table > li:hover a,
.periodic-table > li:focus a,
.periodic-table > li:active a{transform: scale(1);}
  

  
  #helium, #boron, #aluminium, #cerium, #thorium {
  grid-column-start: auto;
  }
  .periodic-table {
  grid-template-columns: 1fr 1fr 1fr;
  }
  .periodic-table > li abbr {
    font-size: 1em;
  }
  .periodic-table > li {
    padding: 4.5rem 1rem;
  }
  .periodic-table > li abbr:after {
    content: attr(title);
    font-size: 2rem;
  }
  .periodic-table > li:before {
    font-size: 1rem;
  }
  .periodic-table > li:nth-child(n+58):nth-last-child(n+48) {
  grid-row-start: auto !important;
}
  .periodic-table > li:nth-child(n+90):nth-last-child(n+16) {
    grid-row-start: auto !important;
  }
  .periodic-table:before {
    display: none !important;
  }
  
  
.sys_detailImage,
.sys_detailImage .contentWrapper{height: 340px;}

.secondaryLogo{width: 100%; padding: 1.5rem; margin: 0 0 1.5rem 0;}
.secondaryLogo img{float:right; width: 22%;}
.secondaryLogo .introText{width: 60%; font-size: 1rem;}

  
}
@media all and (max-width: 767px) {
  body {
  }
  .periodic-table {
    grid-template-columns: 1fr 1fr;
  }
  .periodic-table > li {
    height: auto;
    font-size: 3vw;
  }
  
#pageTitle{line-height: 2rem;position:relative; padding: 12px; height: auto; margin-top: 45px; margin-bottom: 4px;}
#headerArea{margin: 0;}
  

.contentWrapper h2 span {display:block;}
  
  

  
body .sys_detailImage, body .sys_detailImage .contentWrapper{background-position: 50%; height: 240px; margin: 0;}  
body .sys_detailImage .individualElement {position: absolute; margin: 0 0 0 12px;}
body .sys_detailImage .individualElement .elementCode{margin: 0;}
  
  
.contentWrapper.breadcrumb{font-size: 1em; background: #efefef; margin: 4px 0 0 0; padding: 6px 12px;}
.contentWrapper.breadcrumb a{margin: 0; background-color: transparent; border:none; padding: 0; color: #4a4949; text-decoration:underline;}
.contentWrapper.breadcrumb a:hover{text-decoration:underline; color: #000;}
.contentWrapper.breadcrumb div::before{content: "You're here: "; display:block-inline; margin: 0; background:none; border: none; padding: 0; color: #4a4949; font-weight:bold;}
.contentWrapper.breadcrumb span::before{content: "> "; display:block-inline; color: #4a4949; font-weight:normal;}
.contentWrapper.breadcrumb span{font-size: 1em; font-weight:bold;}
.contentWrapper.breadcrumb span span::before{display:none;}

  
  
.secondaryLogo img{float:none; margin-bottom: 10px; width: 240px;}
.secondaryLogo .introText{width: 100%; font-size: 1rem;}

 
  
  
}
  

@media all and (max-width: 479px) {
#pageTitle{font-size: 1.1rem; font-weight:500; padding: 6px 12px;}
  
  


  
.individualElement{padding: 12px;}  
.individualElement h2 {padding-top: 0;}  
  
.sys_detailImage .individualElement{padding: 0 20px 0 0; max-width: 100%;}
  
.sys_detailImage,
.sys_detailImage .contentWrapper{height: 200px;} 
  
.sys_detailImage .individualElement h1,
.sys_detailImage .individualElement h2{font-size: 2.1rem; max-width: 100%;}
.sys_detailImage .individualElement .elementCode{font-size: 2.1rem;}
  
  .periodic-table {
    grid-template-columns: 1fr;
  }
}