/* CSS Document */
* {
	  -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
			  box-sizing: border-box;
	}
	/* ---- button ---- */

	.button {
	  display: inline-block;
	  padding: 0.5em 1.0em;
	  background: #FFF;
	  border: none;
	  border-radius: 0px;
	  /*background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );*/
	  color: #222;
	  font-family: sans-serif;
	  font-size: 20px;
	  text-shadow: 0 1px white;
	  cursor: pointer;
	}
	
	.button:hover {
	  background-color: #8CF;
	  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
	  color: #222;
	}
	
	.button:active,
	.button.is-checked {
	  background-color: #548CD6;
	}
	
	.button.is-checked {
	  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 ---- */
	
	.isotope {
	  border: 0Apx solid #FFF;
	  min-height:900px;
	}
	
	/* clear fix */
	.isotope:after {
	  content: '';
	  display: block;
	  clear: both;
	}
	
	/* ---- .element-item ---- */
	
	.element-item {
	  position: relative;
	  float: left;
	  width: 287px;
	  height: 287px;
	  margin: 5px;
	  padding: 10px;
	  background: #F3F3F3;
	  color: #000;
	  border:solid 1px #FFF;
	}
	.element-item a:link{display:block; height:100%; width:100%; color:#000;}
	.element-item a:visited{color:#000;}
	.element-item a:hover{color:#0074FF; background:#DEE9F8;}
	
	.element-item > * {
	  margin: 0;
	  padding: 0;
	}
	
	.element-item .name {
	  position: absolute;
	  width:100%;
	  top: 110px;
	  text-transform: none;
	  letter-spacing: 0;
	  font-size: 22px;
	  font-weight: normal;
	  text-align:center;
	}
@media only screen and (min-width:785px) and (max-width:960px){
	.isotope {
	  border: 0Apx solid #333;
	  min-height:600px;
	}
	.element-item {
	  position: relative;
	  float: left;
	  width: 190px;
	  height: 190px;
	  margin: 3px;
	  padding: 10px;
	  background: #FFF;
	  color: #000;
	  border:solid 1px #000;
	}
}
@media only screen and (min-width:414px) and (max-width:785px){
	.isotope {
	  border: 0Apx solid #333;
	  min-height:320px;
	}
	.element-item {
	  position: relative;
	  float: left;
	  width: 99px;
	  height: 99px;
	  margin: 2px;
	  padding: 10px;
	  background: #FFF;
	  color: #000;
	  border:solid 1px #000;
	}
}