/*  for WIDESCREEN devices  */
@media screen and (min-width: 1200px) {  }

/*  for TABLET devices  */
@media screen and (max-width: 750px), screen and (max-width: 780px) and (orientation: portrait) {  }

/* for MOBILE devices */
@media screen and (max-width: 520px) {  }

img, embed, object, video {
	max-width: 100%;
}

h1, h2, h3, p {
	font-family: 'Source Sans Pro', sans-serif;
}

a {
	color: #777;
}

header, section, footer {
	width: 94%;
	margin: 0 auto;
	padding: 2em 0;
}

header {
	background-color: #dfdfdf;
	margin-top: 2em;
}

footer {
	padding: 4em 0 15em 0;
	text-align: center;
}

section.elements {	
	display: grid;
	grid-template-columns: repeat(18, minmax(50px, 1fr));
	grid-template-rows: repeat(9, 1fr);
	grid-gap: .7em;
}

h1 {
	font-size: 2.5em;
	text-align: center;
	font-weight: 800;
}

section.elements div {
/* 	border: 1px solid #aaa; */
	text-align: center;
	padding: 1em 0;
}

section.elements div h2 {
	font-size: 1.5em;
	font-weight: 800;
	margin-bottom: .3em;
}

section.elements div h3 {
	font-size: .8em;
	font-weight: 400;
}

section.elements div p {
	font-size: .6em;
}



/*  
	INDIVIDUAL ELEMENT DIV SELECTORS
*/

/*  1  */
section.elements div.h {

}

/*  2  */
section.elements div.he {

}

/*  3  */
section.elements div.li {

}

/*  4  */
section.elements div.be {

}

/*  5  */
section.elements div.b {

}

/*  6  */
section.elements div.c {

}

/*  7  */
section.elements div.n {

}

/*  8  */
section.elements div.o {

}

/*  9  */
section.elements div.f {

}

/*  10  */
section.elements div.ne {

}

/*  11  */
section.elements div.na {

}

/*  12  */
section.elements div.mg {

}

/*  13  */
section.elements div.al {

}

/*  14  */
section.elements div.si {

}

/*  15  */
section.elements div.p {

}

/*  16  */
section.elements div.s {

}

/*  17  */
section.elements div.cl {

}

/*  18  */
section.elements div.ar {

}

/*  19  */
section.elements div.k {

}

/*  20  */
section.elements div.ca {

}

/*  21  */
section.elements div.sc {

}

/*  22  */
section.elements div.ti {

}

/*  23  */
section.elements div.v {

}

/*  24  */
section.elements div.cr {

}

/*  25  */
section.elements div.mn {

}

/*  26  */
section.elements div.fe {

}

/*  27  */
section.elements div.co {

}

/*  28  */
section.elements div.ni {

}

/*  29  */
section.elements div.cu {

}

/*  30  */
section.elements div.zn {

}

/*  31  */
section.elements div.ga {

}

/*  32  */
section.elements div.ge {

}

/*  33  */
section.elements div.as {

}

/*  34  */
section.elements div.se {

}

/*  35  */
section.elements div.br {

}

/*  36  */
section.elements div.kr {

}

/*  37  */
section.elements div.rb {

}

/*  38  */
section.elements div.sr {

}

/*  39  */
section.elements div.y {

}

/*  40  */
section.elements div.zr {

}

/*  41  */
section.elements div.nb {

}

/*  42  */
section.elements div.mo {

}

/*  43  */
section.elements div.tc {

}

/*  44  */
section.elements div.ru {

}

/*  45  */
section.elements div.rh {

}

/*  46  */
section.elements div.pd {

}

/*  47  */
section.elements div.ag {

}

/*  48  */
section.elements div.cd {

}

/*  49  */
section.elements div.in {

}

/*  50  */
section.elements div.sn {

}

/*  51  */
section.elements div.sb {

}

/*  52  */
section.elements div.te {

}

/*  53  */
section.elements div.i {

}

/*  54  */
section.elements div.xe {

}

/*  55  */
section.elements div.cs {

}

/*  56  */
section.elements div.ba {

}

/*  57  */
section.elements div.la {

}

/*  58  */
section.elements div.ce {

}

/*  59  */
section.elements div.pr {

}

/*  60  */
section.elements div.nd {

}

/*  61  */
section.elements div.pm {

}

/*  62  */
section.elements div.sm {

}

/*  63  */
section.elements div.eu {

}

/*  64  */
section.elements div.gd {

}

/*  65  */
section.elements div.tb {

}

/*  66  */
section.elements div.dy {

}

/*  67  */
section.elements div.ho {

}

/*  68  */
section.elements div.er {

}

/*  69  */
section.elements div.tm {

}

/*  70  */
section.elements div.yb {

}

/*  71  */
section.elements div.lu {

}

/*  72  */
section.elements div.hf {

}

/*  73  */
section.elements div.ta {

}

/*  74  */
section.elements div.w {

}

/*  75  */
section.elements div.re {

}

/*  76  */
section.elements div.os {

}

/*  77  */
section.elements div.ir {

}

/*  78  */
section.elements div.pt {

}

/*  79  */
section.elements div.au {

}

/*  80  */
section.elements div.hg {

}

/*  81  */
section.elements div.tl {

}

/*  82  */
section.elements div.pb {

}

/*  83  */
section.elements div.bi {

}

/*  84  */
section.elements div.po {

}

/*  85  */
section.elements div.at {

}

/*  86  */
section.elements div.rn {

}

/*  87  */
section.elements div.fr {

}

/*  88  */
section.elements div.ra {

}

/*  89  */
section.elements div.ac {

}

/*  90  */
section.elements div.th {

}

/*  91  */
section.elements div.pa {

}

/*  92  */
section.elements div.u {

}

/*  93  */
section.elements div.np {

}

/*  94  */
section.elements div.pu {

}

/*  95  */
section.elements div.am {

}

/*  96  */
section.elements div.cm {

}

/*  97  */
section.elements div.bk {

}

/*  98  */
section.elements div.cf {

}

/*  99  */
section.elements div.es {

}

/*  100  */
section.elements div.fm {

}

/*  101  */
section.elements div.md {

}

/*  102  */
section.elements div.no {

}

/*  103  */
section.elements div.lr {

}

/*  104  */
section.elements div.rf {

}

/*  105  */
section.elements div.db {

}

/*  106  */
section.elements div.sg {

}

/*  107  */
section.elements div.bh {

}

/*  108  */
section.elements div.hs {

}

/*  109  */
section.elements div.mt {

}

/*  110  */
section.elements div.ds {

}

/*  111  */
section.elements div.rg {

}

/*  112  */
section.elements div.cn {

}

/*  113  */
section.elements div.nh {

}

/*  114  */
section.elements div.fl {

}

/*  115  */
section.elements div.mc {

}

/*  116  */
section.elements div.lv {

}

/*  117  */
section.elements div.ts {

}

/*  118  */
section.elements div.og {

}

/* 
	ELEMENT COLORS
*/


section.elements div.actinide {
	background-color: #c8ffeb;
}

section.elements div.alkali_metal {
	background-color: #ffccc9;
}

section.elements div.alkaline_earth_metal {
	background-color: #d1d3ff;
}

section.elements div.halogen {
	background-color: #ffffc7;
}

section.elements div.lanthanide {
	background-color: #c0ffff;
}

section.elements div.metalloid {
	background-color: #deeebf;
}

section.elements div.noble_gas {
	background-color: #ffe4c4;
}

section.elements div.nonmetal {
	background-color: #ffffc7;
}

section.elements div.post_transition_metal {
	background-color: #d3ffce;
}

section.elements div.transition_metal {
	background-color: #c0dcff;
}