#contentIsotope {
width: auto;
margin: 0 auto;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}

.boxes-title {
font-size: 30px;
margin-bottom: 10px;
text-align: center;
}

.boxes {
color: #212121;
padding: 20px;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 30%;
background: #ffffff;
border: 2px solid #787878;
border-radius: 5px;
margin-bottom: 20px;
}

/* ---- Bigger Media (1280px) ---- */
  @media screen and (max-width: 1680px) {
    .boxes {
    width: 30%;
    }
  }

/* ---- Smaller Media (1280px) ---- */
  @media screen and (max-width: 1280px) {
    .boxes {
    width: 30%;
    }
  }

  /* ---- Smaller Media (980px) ---- */
    @media screen and (max-width: 980px) {
      .boxes {
      width: 45%;
      }
    }

    /* ---- Smaller Media (980px) ---- */
      @media screen and (max-width: 700px) {
        .boxes {
        width: 90%;
        }
      }


/* Setting Navigation */
#navIsotope {

}

.navbutton {

}

.navbutton.active {
  background-color: #ffffff;
  color:red;
}