* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }


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


button:focus{
  outline-color: #000000;
}

.button {
  border: none;
  display: inline-block;
  padding: 10px 18px;  
  background: none; 
  color: #0da8e2;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: .8em;  
  cursor: pointer;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.button:hover {  
  background: none;  
  color: #FFFFFF;
}

.button:active,
.button.is-checked {
  color: #FFFFFF; 	
  background-color: none;
}

.button.is-checked { 
  color: #FFFFFF;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active { 
  color: #FFFFFF;
}

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

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

.button-group{	
  display: table;
  margin: 1em auto;
}



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

.grid {
  background: #000000;
}

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

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

@media (max-width: 767px) {

.button-group{	
  max-width: 350px;
}
	
.grid-sizer, .grid-item {
  width: 100% !important;
}
	
	
}

@media (max-width: 992px) {

.grid-sizer, .grid-item {
  width: 50%;
}
	
}