@import url('https://fonts.googleapis.com/css?family=Montserrat:600');

.ppsso-btn {
	display: inline-block;
	background-color: #28265A;
	background-image: radial-gradient(ellipse at bottom right, #66C0C3 0%, #28265A 57%);
	border: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: white;
	border-radius: 3px;
	text-transform: none;
	text-align: center;
	letter-spacing: 0;
	margin-bottom: 0;
	box-shadow: none;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
  	-ms-touch-action: manipulation;
 	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	overflow: hidden;
	white-space: nowrap;
	width: auto;
	height: 40px;
	line-height: 42px;
	padding-left: 49px;
	padding-right: 10px;
}

/* cyan-pink */
.ppsso-btn.ppsso-cyan {
	background-color: #65C2C4;
	background-image: radial-gradient(ellipse at bottom right, #b1117d 0%, #65C2C4 57%);
	color: #28265A;
}

.ppsso-btn.ppsso-cyan:hover,
.ppsso-btn.ppsso-cyan:focus {
	color: #28265A;
	background-image: radial-gradient(ellipse at bottom right, rgba(177, 17, 125, 0.85) 0%, rgba(177, 17, 125, 0) 57%);
	box-shadow: inset -96px -12px 64px rgba(177, 17, 125, 0.65);
}
.ppsso-btn.ppsso-cyan:active {
	color: #28265A;
	background-image: radial-gradient(ellipse at bottom right, #b1117d 0%, #65C2C4 57%);
	box-shadow: inset -64px -14px 64px rgba(101, 194, 196, 0.65);
}

.ppsso-btn.ppsso-cyan .ppsso-logotype {
	background-image: url('svg/purple_pp_text_logo.svg');
	transform: scale(1) translate(0.5px, 3px);
	background-position: -0.5px 0px;
	background-size: 90%
}
.ppsso-btn.ppsso-cyan::before {
	background-image: url('svg/pink_white_purple_pp_logo.svg');
	transform: scale(.7) translateX(-63px);
	background-size: 114%;
}

/* pink-cyan */
.ppsso-btn.ppsso-pink {
	background-color: #b1117d;
	background-image: radial-gradient(ellipse at bottom right, #65C2C4 0%, #b1117d 57%);
	color: white;
}

.ppsso-btn.ppsso-pink:hover,
.ppsso-btn.ppsso-pink:focus {
	color: rgba(255,255,255,.95);
	background-image: radial-gradient(ellipse at bottom right, rgba(101, 194, 196, 0.85) 0%, rgba(101, 194, 196, 0) 57%);
	box-shadow: inset -96px -12px 64px rgba(101, 194, 196, 0.65);
}
.ppsso-btn.ppsso-pink:active {
	color: rgba(255,255,255,.65);
	background-image: radial-gradient(ellipse at bottom right, #65C2C4 0%, #b1117d 57%);
	box-shadow: inset -64px -14px 64px rgba(177, 17, 125, 0.65);
}

.ppsso-btn.ppsso-pink .ppsso-logotype {
	background-image: url('svg/pixelpin_logo_centred.svg');
	transform: scale(0.94) translate(-1.4px, 2.3px);
	background-position: -47px -12px;
}
.ppsso-btn.ppsso-pink::before {
	background-image: url('svg/purple_white_cyan_pp_logo.svg');
	transform: scale(.7) translateX(-63px);
	background-size: 102%;
}

/* white */
.ppsso-btn.ppsso-white {
	background-color: white;
	background-image: radial-gradient(ellipse at bottom right, white 0%, white 57%);
	color: #28265A;
}

.ppsso-btn.ppsso-white:hover,
.ppsso-btn.ppsso-white:focus {
	color: #28265A;
	background-image: radial-gradient(ellipse at bottom right, white 0%, white 57%);
	box-shadow: inset -96px -12px 64px white;
}
.ppsso-btn.ppsso-white:active {
	color: #28265A;
	background-image: radial-gradient(ellipse at bottom right, white 0%, white 57%);
	box-shadow: inset -64px -14px 64px white;
}

.ppsso-btn.ppsso-white .ppsso-logotype {
	background-image: url('svg/purple_pp_text_logo.svg');
	transform: scale(1) translate(0.5px, 3px);
	background-position: -0.5px 0px;
	background-size: 90%
}
.ppsso-btn.ppsso-white::before {
	background-image: url('svg/pink_purple_cyan_pp_logo.svg');
	transform: scale(.7) translateX(-63px);
	background-size: 114%;
}

/* cyan & white medium sized button w/purple text*/
.ppsso-btn.ppsso-md.ppsso-white .ppsso-logotype {
	transform: scale(.85) translate(-5px, 4.5px);
}

.ppsso-btn.ppsso-sm.ppsso-white .ppsso-logotype {
	transform: scale(.7) translate(-14px, 4.5px);
	background-position: -0.5px 0px;
}

.ppsso-btn.ppsso-md.ppsso-cyan .ppsso-logotype {
	transform: scale(.85) translate(-5px, 4.5px);
}

.ppsso-btn.ppsso-sm.ppsso-cyan .ppsso-logotype {
	transform: scale(.7) translate(-14px, 4.5px);
	background-position: -0.5px 0px;
}
/* default purple-cyan */
.ppsso-btn:hover,
.ppsso-btn:focus {
	color: rgba(255,255,255,.95);
	background-image: radial-gradient(ellipse at bottom right, rgba(102, 192, 195, 0.85) 0%, rgba(102, 192, 195, 0) 57%);
	box-shadow: inset -96px -12px 64px rgba(102, 192, 195, 0.6);
}
.ppsso-btn:active {
	color: rgba(255,255,255,.65);
	background-image: radial-gradient(ellipse at bottom right, #66C0C3 0%, #28265A 57%);
	box-shadow: inset -64px -14px 64px rgba(40, 38, 91, 0.65);
}
.ppsso-btn:link, :visited, :hover, :active {
	text-decoration: none;
}

.ppsso-btn .ppsso-logotype {
	text-indent: -4000px;
	color: rgba(255,255,255,0);
	display: inline-block;
	width: 69px;
	height: 16px;
	overflow: hidden;
	background-image: url('svg/pixelpin_logo_centred.svg');
	background-repeat: no-repeat;
	background-position: -47px -12px;
  	vertical-align: baseline;
	  transform: scale(0.94) translate(-1.4px, 2.3px);
}
.ppsso-btn::before {
	content: ' ';
	width: 40px;
	height: 40px;
	display: block;
  	position: absolute;
	background-image: url('svg/pixelpin_logo_24.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	transform: scale(.7) translateX(-63px);
}

.ppsso-btn.ppsso-md {
	width: auto;
	height: 28px;
	line-height: 28px;
	vertical-align: middle;
	font-size: 14px;
	padding-left: 37px;
	padding-right: 0px;
}
.ppsso-btn.ppsso-md::before {
	width: 28px;
	height: 28px;
	transform: scale(.7) translateX(-46px);
}
.ppsso-btn.ppsso-md .ppsso-logotype {
	transform: scale(.8) translate(-7px, 4px);
}

.ppsso-btn.ppsso-sm {
	width: auto;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	font-size: 12px;
	padding-left: 30px;
	padding-right: 0px;
}
.ppsso-btn.ppsso-sm::before {
	width: 20px;
	height: 20px;
	transform: scale(.7) translateX(-35px);
}
.ppsso-btn.ppsso-sm .ppsso-logotype {
	transform: scale(.65) translate(-16px, 4.5px);
	height: 14px;
	width: 69px;
	background-position: -47px -13px;
	/* part of the span image was being cut off. For some reason inline-table fixes this.*/
	display: inline-block;
	margin-right: -14px;
}

.ppsso-btn.ppsso-logo-lg {
	padding-right: 0px;
	padding-left: 48px;
}

button.ppsso-btn.ppsso-logo-lg::before {
	transform: scale(.7) translateX(-63px) translateY(-29px);
}

.ppsso-btn.ppsso-md.ppsso-logo-md {
	padding-left: 33px;
}

button.ppsso-btn.ppsso-md.ppsso-logo-md::before {
	transform: scale(.7) translateX(-44px) translateY(-19px);
}

.ppsso-btn.ppsso-md.ppsso-logo-md::before {
	transform: scale(.7) translateX(-44px);
}

.ppsso-btn.ppsso-sm.ppsso-logo-sm {
	padding-left: 26px;
}

button.ppsso-btn.ppsso-sm.ppsso-logo-sm::before {
	transform: scale(.7) translateX(-33px) translateY(-14px);
}

.ppsso-btn.ppsso-sm.ppsso-logo-sm::before {
	transform: scale(.7) translateX(-33px);
}