.button-blue,
.button-pink,
.button-yellow,
.button-red,
.button-green {
    display      : block;
    background   : white;
    padding      : 15px 20px;
    position     : relative;
    color        : #999;
    box-shadow   : 0 2px 1px -1px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    overflow     : hidden;
    margin       : 0 0 0.75rem 0;
    letter-spacing:-1px;
}

.button-disabled {
    background   : #f5f5f5 !important;
}
.button-red.button-disabled h3 {
    color: #bbb !important;
    text-align:center !important
}
.button-red.button-disabled:after {
    background: #d7d4d4;
}

.button-blue .style,
.button-pink .style,
.button-yellow .style,
.button-red .style,
.button-green .style {
    width   : 10px;
    position: absolute;
    left    : 0;
    top     : 0;
    height  : 100%;
}

.button-blue .style:after,
.button-pink .style:after,
.button-yellow .style:after,
.button-red .style:after,
.button-green .style:after {
    content   : "";
    position  : absolute;
    z-index   : 1;
    top       : 100%;
    left      : 0;
    width     : 100%;
    margin-top: -5px;
    height    : 5px;
    background: #4e8ad1;
}

.button-blue h3,
.button-pink h3,
.button-yellow h3,
.button-red h3,
.button-green h3 {
    font-weight: 600;
    color      : black;
    font-size  : 1.2rem;
    margin     : 0 0 0.1rem 0;
    letter-spacing:0px;
}

.button-blue .arrow,
.button-pink .arrow,
.button-yellow .arrow,
.button-red .arrow,
.button-green .arrow {
    background : #f5f5f5;
    position   : absolute;
    right      : 0;
    top        : 0;
    height     : 100%;
    width      : 40px;
    text-align : center;
    color      : #e3e3e8;
    text-shadow: -1px 0 1px rgba(255, 255, 255, 1);
}

.button-blue .arrow span,
.button-pink .arrow span,
.button-yellow .arrow span,
.button-red .arrow span,
.button-green .arrow span {
    font-size     : 2rem;
    vertical-align: middle;
}

.button-blue .arrow span:before,
.button-pink .arrow span:before,
.button-yellow .arrow span:before,
.button-red .arrow span:before,
.button-green .arrow span:before {
    content       : "";
    display       : inline-block;
    height        : 100%;
    vertical-align: middle;
}

.button-blue .arrow:after,
.button-pink .arrow:after,
.button-yellow .arrow:after,
.button-red .arrow:after,
.button-green .arrow:after {
    content   : "";
    position  : absolute;
    top       : 100%;
    left      : 0;
    width     : 100%;
    margin-top: -5px;
    height    : 5px;
    background: #d7d4d4;
    z-index   : 1;
}

.button-blue .price,
.button-pink .price,
.button-yellow .price,
.button-red .price,
.button-green .price {
    position   : absolute;
    right      : 45px;
    top        : 0;
    height     : 100%;
    font-size  : 2.2rem;
    font-weight: 600;
}

.button-blue .price:before,
.button-pink .price:before,
.button-yellow .price:before,
.button-red .price:before,
.button-green .price:before {
    content       : "";
    display       : inline-block;
    height        : 100%;
    vertical-align: middle;
}

.button-blue:after,
.button-pink:after,
.button-yellow:after,
.button-red:after,
.button-green:after {
    content   : "";
    position  : absolute;
    background: #e6e6e6;
    top       : 100%;
    left      : 0;
    width     : 100%;
    margin-top: -5px;
    height    : 5px;
}

.button-blue .style {
    background: #7daee9;
}

.button-pink .style {
    background: #de7cb9;
}

.button-pink .style:after {
    background: #d052a0;
}

.button-green .style {
    background: #7fd373;
}

.button-green .style:after {
    background: #4ba73c;
}

.button-red .style {
    background: #ba2836;
}

.button-red .style:after {
    background: #ba0012;
}

.button-yellow .style {
    background: #eff638;
}

.button-yellow .style:after {
    background: #c0c542;
}