/* 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;
  }