/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.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:      -o-transform, 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 */


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/* ---- button ---- */

.button {
  display: inline-block;
  padding: 10px 18px;
  background: #FFF;
  border: none;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  outline:none;
}

.button:hover {
  outline:none;
  background-color: #EEE;
  /*text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);*/
  color: #000;
}

.button:active,
.button.selected {
  background-color: #999;
  outline:none;
  border: 0;
}

.button.selected {
  color: white;
  /*text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);*/
}

.button:active {
  /*box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);*/
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

/* ---- isotope ---- */


/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
 width: 25%;
 float:left
}
.element-item img{
 width: 100%;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;
  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}




@media only screen and (max-width: 1024px) {
.element-item {
 width: 33%;
 float:left
}

}

@media only screen and (max-width: 768px) {
.element-item {
 width: 50%;
 float:left
}

}

@media only screen and (max-width: 480px) {
.element-item {
 width: 100%;
 float:left
}