.button {
        text-decoration: none;
        display: block;
        cursor: pointer;
	width: 100%;
        max-width: 350px;
        margin: 0 auto 20px;
        color: #000;
        border-radius: 8px;
	background-color: #999;
        border: solid 1px #999;
        padding: 10px 0;
        font-size: 23px;
        line-height: 45px;
        position: relative;
        text-align: center;
	text-shadow: 0 0 5px rgba(255,255,255,0.4);
}
.button .buttonShine {
        width: 100%;
	height: 50%;
        opacity: 0.6;
        border-radius: 6px;
        background-image: linear-gradient(to bottom, #F7B61B, #FAD625);
        display: block;
        position: absolute;
        bottom: 0;
}
.button .buttonText {
        position: relative;
        z-index: 2;
        font-family: Roboto, Helvetica, Arial, sans-serif;
}
.button .buttonTriangle {
        position: absolute;
        right: 20px;
        top: 50%;
	margin-top: -8px;
        width: 0;
        height: 0;
        border-left: 8px solid #000;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
}
.button:hover {
        background-image: linear-gradient(to top, #ffe799 3%, #ffe799);
        cursor: pointer;
}
.button:hover .buttonShine{
        opacity: 0.4;
}
.button:focus {
}


.button.btnSmall {
	font-size: 20px;
	line-height: 28px;	
}


/* Yellow Button */

.button.yellow {
	background-image: linear-gradient(to top, #fac71d 3%, #fcdd68);
        border: solid 1px #0f1d4c;
	color: #004fca;
}
.button.yellow .buttonShine {
	background-image: linear-gradient(to bottom, #F7B61B, #FAD625);
}
.button.yellow .buttonTriangle {
	border-left: 8px solid #004fca;
}
.button.yellow:hover {
        background-image: linear-gradient(to top, #ffe799 3%, #ffe799);
        cursor: pointer;
}


@media (max-width: 350px) {

.button { width: 100%; }

}