/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {  z-index: 2; padding: 5px;background: #FFE4A9;}
.isotope-hidden.isotope-item {  pointer-events: none;  z-index: 1;}
/**** Isotope CSS3 transitions ****/
.isotope,.isotope .isotope-item {  -webkit-transition-duration: 0.8s;     -moz-transition-duration: 0.8s;      -ms-transition-duration: 0.8s;       -o-transition-duration: 0.8s;          transition-duration: 0.8s;}
.isotope {  -webkit-transition-property: height, width;     -moz-transition-property: height, width;      -ms-transition-property: height, width;       -o-transition-property: height, width;          transition-property: height, width;}
.isotope .isotope-item {  -webkit-transition-property: -webkit-transform, opacity;     -moz-transition-property:    -moz-transform, opacity;      -ms-transition-property:     -ms-transform, opacity;       -o-transition-property:         top, left, opacity;          transition-property:         transform, opacity;}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,.isotope.no-transition .isotope-item,.isotope .isotope-item.no-transition {  -webkit-transition-duration: 0s;     -moz-transition-duration: 0s;      -ms-transition-duration: 0s;       -o-transition-duration: 0s;          transition-duration: 0s;}
/* End: Recommended Isotope styles */


/* disable CSS transitions for containers with infinite scrolling*/.isotope.infinite-scrolling {  -webkit-transition: none;     -moz-transition: none;      -ms-transition: none;       -o-transition: none;          transition: none;}


/**** Isotope styles ****/
/* required for containers to inherit vertical size from window *//*html,body {  height: 100%;}*/
#container {  border: 1px solid #666;  padding: 5px;  margin-bottom: 20px;}
.element {  width: 110px;  height: 110px;  margin: 5px;  float: left;  overflow: hidden;  position: relative;  background: #888;  color: #222;  -webkit-border-top-right-radius: 1.2em;      -moz-border-radius-topright: 1.2em;          border-top-right-radius: 1.2em;}
.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

.element * {  position: absolute;  margin: 0;}
.element .symbol {  left: 0.2em;  top: 0.4em;  font-size: 3.8em;  line-height: 1.0em;  color: #FFF;}.element.large .symbol {  font-size: 4.5em;}
.element.fake .symbol {  color: #000;}
.element .name {  left: 0.5em;  bottom: 1.6em;  font-size: 1.05em;}
.element .weight {  font-size: 0.9em;  left: 0.5em;  bottom: 0.5em;}
.element .number {  font-size: 1.25em;  font-weight: bold;  color: hsla(0,0%,0%,.5);  right: 0.5em;  top: 0.5em;}
.variable-sizes .element.width2 { width: 230px; }
.variable-sizes .element.height2 { height: 230px; }
.variable-sizes .element.width2.height2 {  font-size: 2.0em;}
.element.large,.variable-sizes .element.large,.variable-sizes .element.large.width2.height2 {  font-size: 3.0em;  width: 350px;  height: 350px;  z-index: 100;}
.clickable .element:hover {  cursor: pointer;}
.clickable .element:hover h3 {  text-shadow:    0 0 10px white,    0 0 10px white  ;}
.clickable .element:hover h2 {  color: white;}