/**
 * $Variables 
 **/
/**
 * $Mixins 
 **/
/* http://www.sitepoint.com/sass-mixins-kickstart-project/ */
/* $Base */

/* $Buttom */


.entry-content .btn-gelatin-blue,
.entry-content .btn-gelatin-red,
.entry-content .btn-gelatin-green,
.entry-content .btn-gelatin-purple,
.entry-content .btn-gelatin-gray{ 
width: 500px;
  font-size: 28px;
  font-weight: bold;
  margin: 10px auto 20px;
  display: block;
  text-decoration: none;
  text-align: center;
  position: relative;
  outline: none;
  color: #fff;
  line-height: 2.3;
  border-radius: 3px;
  border: none;
  -webkit-transition: -webkit-box-shadow .3s;
  -webkit-transition: box-shadow .3s;
  transition: box-shadow .3s;
}




.btn-gelatin-blue,
input.btn-gelatin-blue{
  background: #1253A4;
  box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}

.btn-gelatin-red,
input.btn-gelatin-red{
  background: #e5000b;
  box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}

.btn-gelatin-green,
input.btn-gelatin-green{
  background: #008c4b;
  box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}

.btn-gelatin-purple,
input.btn-gelatin-purple{
  background: #ad1283;
  box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}

.btn-gelatin-gray,
input.btn-gelatin-gray{
  background: #2e2e2e;
  box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}

input.btn-gelatin-blue,
input.btn-gelatin-red,
input.btn-gelatin-green,
input.btn-gelatin-purple,
input.btn-gelatin-gray {
  line-height: normal !important;
}





.btn-gelatin-blue a,
.btn-gelatin-red a,
.btn-gelatin-green a,
.btn-gelatin-purple a,
.btn-gelatin-gray a{
  color: #fff;
  text-decoration: none;
}



.btn-gelatin-blue:hover, .btn-gelatin-blue:focus,
.btn-gelatin-red:hover, .btn-gelatin-red:focus,
.btn-gelatin-green:hover, .btn-gelatin-green:focus,
.btn-gelatin-purple:hover, .btn-gelatin-purple:focus,
.btn-gelatin-gray:hover, .btn-gelatin-gray:focus{
  -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  -webkit-animation: gelatine 0.5s 1;
  animation: gelatine 0.5s 1;
}




.btn-gelatin-blue:hover, .btn-gelatin-blue:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1253A4;
}

.btn-gelatin-red:hover, .btn-gelatin-red:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e5000b;
}

.btn-gelatin-green:hover, .btn-gelatin-green:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #008c4b;
}

.btn-gelatin-purple:hover, .btn-gelatin-purple:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ad1283;
}

.btn-gelatin-gray:hover, .btn-gelatin-gray:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2e2e2e;
}





.btn-gelatin-blue:active,
.btn-gelatin-red:active,
.btn-gelatin-green:active,
.btn-gelatin-purple:active,
.btn-gelatin-gray:active{
  background: #4ECDC4;
  -webkit-transition-duration: 0;
  transition-duration: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3ac7bd;
}




/**
 * $keyframes \ gelatine 
 **/
@keyframes gelatine {
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
}
@-webkit-keyframes gelatine {
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
}