/* CSS Document */
/* Blue Button that matches Nav Bar */
.buttonBlue {
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 12px;
padding: 12px 28px;
font-size: 16px;
background: #3092c0;
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);  
transition-duration: 0.4s;
}

.buttonBlue:hover {
  background: #006892;
  background-image: linear-gradient(to bottom, #006188, #006f9c);
  color: white;
}
/* End of Blue Button that matches Nav Bar */

/* Grey Button */
.buttonGrey {
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 12px;
padding: 6px 14px;
font-size: 16px;
background: 838487;
background-image: linear-gradient(to bottom, #7d7e82, #8a8b8f);  
transition-duration: 0.4s;
}

.buttonGrey:hover {
  background: #3A3A3A;
  background-image: linear-gradient(to bottom, #333333, #595959);
  color: white;
}
/* End of Grey Button */

/* Grey Button */
.buttonTeal {
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 12px;
padding: 6px 14px;
font-size: 16px;
background-color: rgb(31,187,225);
background: 838487;
transition-duration: 0.4s;
}

.buttonTeal:hover {
  background: #3A3A3A;
  background-image: linear-gradient(to bottom, #333333, #595959);
  color: white;
}
/* End of Grey Button */



/* HTF Button */
.buttonHTF {
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 12px;
padding: 12px 28px;
font-size: 16px;
background: #3092c0;
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);  
transition-duration: 0.4s;
}

.buttonHTF:hover {
  background: #006892;
  background-image: linear-gradient(to bottom, #006188, #006f9c);
  color: white;
}
/* End of HTF Button */