/* <- Demo Stuff Start */


h7,
.h7 {
  font-weight: 500;
  line-height: 1;
	color: #c11071;
}
h7, .h7 {
  font-size: 0.9rem;
}
.btn {
  flex: 1 1 auto;
  width: 150px;
  margin: 6px;
  padding: 10px;
  text-align: center;
  transition: 0.3s;
  background-size: 200% auto;
  color: white;
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 5px #7788bf;
  border-radius: 10px;
  font-size: 21px;
 }

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btn:hover {
  color: #d7def2;
  background-position: right center; /* change the direction of the change here */
}

.btn2:hover {
  color: #d7def2;
	text-underline: 0;
  background-position: right center; /* change the direction of the change here */
}

.btn-1 {
  background-image: linear-gradient(to right, #ffe299 0%, #ffac5a 51%, #ffe299 100%);
}

.btn-2 {
  background-image: linear-gradient(to right, #f099ff 0%, #17c8ff 51%, #f099ff 100%);
}

.btn-3 {
  background-image: linear-gradient(to right, #99ffa5 0%, #47d4e2 51%, #99ffa5 100%);
}

.btn-4 {
  background-image: linear-gradient(to right, #99ccff 0%, #b799ff 51%, #99ccff 100%);
}

.btn-5 {
  background-image: linear-gradient(to right, #ffa4a4 0%, #ff7de7 51%, #ffa4a4 100%);
}

/* Magic Stuff End -> */