.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}


.button-vbutt {
    display: inline-block;
    padding: 11px 34px 10px 34px; 
    border:1px #20334e solid;
    text-decoration: none;
    color: #20334e;
    font-family: 'Delius', cursive;
    font-size:16px;
    font-weight:400;
}
/* Bounce To Right */
.hvr-vbutt {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.hvr-vbutt:hover, .hvr-vbutt:focus, .hvr-vbutt:active {
  color:#fff;
  background-color: #20334e;
}



.button-smbutt {
    display: inline-block;
    padding: 11px 24px 10px 24px; 
    border:1px #326574 solid;
    text-decoration: none;
    color: #326574;
    font-family: 'Delius', cursive;
    font-size:16px;
    font-weight:400;
}
/* Bounce To Right */
.hvr-smbutt {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.hvr-smbutt:hover, .hvr-smbutt:focus, .hvr-smbutt:active {
  color:#fff;
  background-color: #326574;
}


.button-whitebutt {
    display: inline-block;
    padding: 11px 24px 10px 24px; 
    border:1px #fff solid;
    text-decoration: none;
    color: #fff;
    font-family: 'Delius', cursive;
    font-size:16px;
    font-weight:400;
}
/* Bounce To Right */
.hvr-whitebutt {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.hvr-whitebutt:hover, .hvr-whitebutt:focus, .hvr-whitebutt:active {
  color:#e7921d;
  background-color: #fff;
}



.button-orangebutt {
    display: inline-block;
    padding: 11px 24px 10px 24px; 
    border:1px #ff9500 solid;
    text-decoration: none;
    color: #ff9500;
    font-family: 'Delius', cursive;
    font-size:16px;
    font-weight:400;
}
/* Bounce To Right */
.hvr-orangebutt {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.hvr-orangebutt:hover, .hvr-orangebutt:focus, .hvr-orangebutt:active {
  color:#fff;
  background-color: #ff9500;
}


/*-----------------------------------------------------------------------------*/
@media only screen and (min-width: 959px) and (max-width: 1130px){
.button-whitebutt {border:1px #223550 solid;color: #223550;}
.hvr-whitebutt:hover, .hvr-whitebutt:focus, .hvr-whitebutt:active {color:#fff;background-color: #223550;}
}
@media only screen and (min-width: 768px) and (max-width: 959px){
.button-whitebutt {border:1px #223550 solid;color: #223550;}
.hvr-whitebutt:hover, .hvr-whitebutt:focus, .hvr-whitebutt:active {color:#fff;background-color: #223550;}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
.button-whitebutt {border:1px #223550 solid;color: #223550;}
.hvr-whitebutt:hover, .hvr-whitebutt:focus, .hvr-whitebutt:active {color:#fff;background-color: #223550;}
}

@media only screen and (min-width: 320px) and (max-width: 479px){
.button-whitebutt {border:1px #223550 solid;color: #223550;}
.hvr-whitebutt:hover, .hvr-whitebutt:focus, .hvr-whitebutt:active {color:#fff;background-color: #223550;}
}