.square {
  height: 200pt;
  width: 24.5%;
  float:left;
  margin:1px;
  background-color: #E2DCDA;
  text-align:center;
  color: #7f888f;
  font-family: "Open Sans", sans-serif;
  font-size: 20pt;
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
  
	/*
      height: 75px;
      width: 75px;
      color: white;
      background-color: rgb(77, 77, 77);
      border-radius: 7px;
	*/
}
@media screen and (max-width: 1680px) {
	.square {
	}
}

@media screen and (max-width: 1280px) {
	.square {
	}
}

@media screen and (max-width: 980px) {
	.square {
	height: 130pt;
	width: 30%;
	padding:10px;
	font-size: 13pt;
	font-weight: 800;
	}
}

@media screen and (max-width: 736px) {
	.square {
	height: 130pt;
	width: 35%;
	padding:10px;
	font-size: 13pt;
	font-weight: 800;
	} 
}

@media screen and (max-width: 480px) {
	.square {
	height: 130pt;
	width: 90%;
	padding:5px;
	font-size: 13pt;
	font-weight: 800;
	} 
}
@media screen and (max-width: 360px) {
	.square {
	}
}