.button-swirl {

  position: relative;
  margin: 0 auto;
  width: 18.75em;
  height: 72px;
  top: 37%;
  -webkit-transform: translateY(-45%);
  transform: translateY(-45%);

}
.button-swirl-image-background {

  height: 4.5em;
  width:  4.5em;
  background-color:#E0F0F4; 
  border-top-left-radius: 54em;
  border-bottom-left-radius: 54em;
  border-top-right-radius: 1450% 353.75em;
  border-bottom-right-radius: 1450% 353.75em;
  position: absolute;
  z-index: 10;


}

.button-swirl-image-background img {

  position: absolute;
  margin: 1.1875em auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

}

.button-swirl-text {

  height: 4.5em;
  width: 15.8em;
  left: 3em;
  position: absolute;
  background-color: #005F82;
  border-top-right-radius: .3em;
  border-bottom-right-radius: .3em;
  padding-right: 2em

}


.button-swirl-background {

  width: 100%;
  height: 12em;
  position: relative;

}


/**************************************/
.button-swirl:hover .button-swirl-image-background {

    width: 4.1em;
	background-color:#E0F0F4; 
}
.button-swirl:hover .button-swirl-text {
    background-color: #59b363;
}
.button-swirl:hover .corner {

    background-color:#E0F0F4;
    border-top-left-radius: .322em;
    border-bottom-left-radius: .322em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

}
.button-swirl:hover .corner:after, .corner:before {

    content: "";
    position: absolute;
    left: 100%;
    width: 1.0625em;
    height: 51%;

}
.button-swirl:hover .corner:before {

    top: 0px;
    background: -webkit-linear-gradient(bottom left, #E0F0F4 52%, transparent 51%);
    background: linear-gradient(to top right, #E0F0F4 52%, transparent 51%);

}
.button-swirl:hover .corner:after {

    bottom: 0px;
    background: -webkit-linear-gradient(top left, #E0F0F4 52%, transparent 51%);
    background: linear-gradient(to bottom right, #E0F0F4 52%, transparent 51%);

}
.button-swirl:hover .button-swirl-image-background img {

  left: .45em;

}
/*******************************************/

html body .button-swirl-text h2{

  color: #fff !important;
  padding-top: 1.3em;
  text-align: center;
  font-size: 1.2em!important;
  margin-left: 16%;
  padding-left: 0;
  padding-right: 0;
  width: 93%;

  font-family: 'proxima-nova', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: inherit;
    text-rendering: optimizeLegibility;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.4

}
html body .button-swirl-subtext p:first-of-type {

  padding-top: 4.65em;

}
html body .button-swirl-subtext p {

  margin-bottom: 0;
  text-align: center;
  font-size: 0.875em !important;

}


@media ( max-width: 299px ) {
  .button-swirl {
    zoom: .65;
  }
}