@charset "utf-8";
/* CSS Document */

/*COMMON ELEMENTS*/


* { box-sizing: border-box; }



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

.gallery { margin-top: 100px; margin-bottom: 0px;}
.gallery .button { 
	
  display: inline-block;
  padding: 0.5em 1.0em;
  margin-bottom: 10px;
  background-color: transparent;
  border: 0px solid #E1E1E1;
  border-radius: 30px;
  color: #337ab7;
  font-family: 'robotolight';
  font-size: 16px;
  cursor: pointer;
}

.gallery .button:hover {
  text-decoration:none; background-color: #fff; color: #333;
}

.gallery .button:active,
.gallery .button.is-checked {
  background-color: #fff;
}

.gallery .button.is-checked {
  color: #666;
}

.gallery .button:active {
  box-shadow: none;
}

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

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

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

.gallery .button-group .button:first-child { border-radius: 60px; }
.gallery .button-group .button:last-child { border-radius: 60px; }

/* ---- grid ---- */

.gallery .grid {
  border: 0px solid #333;
  max-width: 1200px;
}

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

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

.gallery .element-item {
  position: relative;
  float: left;
  width: 33%;
 /* height: 200px;*/
  margin: 0px;
  margin-bottom: 25px;
  padding: 0px;
  background: #888;
  color: #262524;
}

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

.gallery .element-item .name {
  /*left: 10px; */
  text-transform: none;
  letter-spacing: 0;

}

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

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

.gallery .element-item .weight {
  /*position: absolute;*/
  left: 10px;
 /* top: 76px;*/
  font-size: 12px;
}
.gallery .element-item h5 { font-size: 22px; line-height: 24px;}


.gallery .element-item.userd      		{ background:  none; }
.gallery .element-item.microsites      	{ background:  none; }
.gallery .element-item.static-ad      	{ background:  none; }


.gallery .element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.gallery .element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.gallery .element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.gallery .element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }

.gallery .element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.gallery .element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.gallery .element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.gallery .element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.gallery .element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

.gallery .container-v1 { position:relative; padding: 10px; min-height:350px;}

@media (max-width: 991px) {
	
.gallery .container-v1 { min-height:200px;}
	
}

.gallery .thumbnail-v1 { position:relative; padding: 0px;}
.gallery .thumbnail-v1 img { width:100%;}
.gallery .container-v1 a:hover { cursor:pointer;}
.gallery .container-v1 .label-type-v1 { position:absolute; top: 10px; padding: 3px 5px ; background: #0A6D8C; color: #fff; border-bottom-right-radius: 5px;}
.gallery .container-v1 .label-type-v2 { position:absolute; top: 10px; padding: 3px 5px ; background: #900; color: #fff; border-bottom-right-radius: 5px;}
.gallery .container-v1 .label-type-v3 { position:absolute; top: 10px; padding: 3px 5px ; background:#003b73; color: #fff; border-bottom-right-radius: 5px;}
.gallery .sort-by {float:left; margin-top:10px;}


@media (max-width: 768px) {
.gallery { margin-top:20px;}
.gallery .button {font-size:14px;}	
.gallery .sort-by {margin-top:7px;}
.gallery .container-v1 .label-type-v2, .gallery .container-v1 .label-type-v1, .gallery .container-v1 .label-type-v3 { font-size:11px;}
}