body{
  padding:0;
  margin:0;
  background:#eee;
  position:relative;
  font-family: 'Open Sans', sans-serif;
}

.button-group {
 padding:  50px 0; 
}
.button-group h2 {
  color:#000;
  font-size: 35px;
  font-size: 700;
  margin: 0 0 20px 0; 
}
.button {
  display: inline-block;
  padding: 8px 20px;
  background: #ffffff;
  font-family: sans-serif;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #007bc4;
  margin: 10px;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}

.button:hover {
  background-color: #007bc4;
}

.button:active,
.button.is-checked {
  background-color: #007bc4;
  outline: none;
  color:white;
  box-shadow: 0 2px 0 #000;
}

.button-group {
  text-align: center;
}

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

img {
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
}
.img-responsive:hover {

  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
}


.grid article {
  background-color: #FFFFFF;
  display: block;
  float: left;
  width: 25%;
}

@media (max-width: 1024px) {
  .grid article {
    width: 31.3%;
  }
}

@media (max-width: 767px) {
  .grid article {
    width: 48%;
  }
}

@media (max-width: 479px) {
  .grid article {
    margin: 2% 0;
    width: 100%;
  }
}