/*
	CSS - Skype.com
	BUTTONS
*/


/*
 * Suggested order:
 *  display, position, float, clear
 *  width, height
 *  margin, padding
 *  border, background
 *  color, font, line-height, text-align, text-decoration
 *  vertical-align, white-space, overflow, cursor, list-style
 */


/* DEFAULT STYLES
----------------------------------------------------------------------------------------------------*/

/* GENERAL BUTTON STYLE */

button.button,
a.button,
button.smallButton,
a.smallButton {
	color: white;
	display: inline-block;
	height: 100%;
	padding: 8px 25px 11px 25px;
	cursor: pointer;
	margin: 0;
	overflow: visible;
	border: none;
	text-decoration: none;
	text-align: left;
	line-height: 24px;
	font-size: 20px;
	font-weight: 400;
	font-family: "Segoe UI", "Segoe WP", "Segoe UI Regular", "Helvetica Neue", Helvetica, Tahoma, Arial Unicode MS, sans-serif;
	letter-spacing: -0.01em;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
	outline: none;
	outline-width: 0;
	width: auto;
	border: none;
	background: transparent;
	white-space: nowrap;
	cursor: pointer;
	cursor: hand;
	text-align: center;
	-webkit-font-smoothing: subpixel-antialiased
}

button.button,
button.smallButton {
}

button.button {
	/* padding: 11px 25px 12px 25px;  */
}

button.button:hover,
a.button:hover,
button.smallButton:hover,
a.smallButton:hover {
	color: white;
}

	/* remove extra padding from FF buttons */
	button.button::-moz-focus-inner,
	button.smallButton::-moz-focus-inner {
	    border: 0;
	    padding: 0;
	}

/* General small button style */
button.smallButton,
a.smallButton {
	padding: 3px 18px 5px 18px;
	font-size: 16px;
}

@-moz-document url-prefix() {
	button.smallButton,
	a.smallButton {
		padding: 2px 18px 6px 18px;
	}
}

/* remove IE 7 button focus black border */
*:first-child+html button
{
    filter:chroma(color=#000000);
}

/* IE7 fix regular button paddings */

*:first-child+html a.button {
	padding-top: 9px;
	padding-bottom: 10px;
}

*:first-child+html button.button {
	padding-top: 7px;
	padding-bottom: 8px;
}

*:first-child+html button.smallButton {
	padding-top: 4px;
	padding-bottom: 4px;
}

* html button.button {
	padding-top: 9px;
	padding-bottom: 10px;
}

* html button.smallButton {
	padding-top: 4px;
	padding-bottom: 4px;
}



/* ARROW STYLES
----------------------------------------------------------------------------------------------------*/

.arrowNext,
.arrowPrev,
.arrowUp,
.arrowDown,
.noIcon {
	display: inline-block; /* if not specified RTL wont work properly */
}

.arrowNext,
.arrowPrev,
.arrowUp,
.arrowDown {
	background-image: url('../assets/images/buttons-sprite.png');
	background-repeat: no-repeat;
	text-align: middle;
	/* display: inline-block; if not specified RTL wont work properly */
}



/* PRIMARY BUTTON
----------------------------------------------------------------------------------------------------*/

button.primaryCta,
a.primaryCta {
	background-color: #7fba00;
	border: 2px solid #7fba00;
}

	button.primaryCta:hover,
	a.primaryCta:hover {
		background-color: #75ab00;
		border: 2px solid #75ab00;
	}

	button.primaryCta:active,
	a.primaryCta:active {
		background-color: #6c9e00;
		border: 2px solid #6c9e00;
	}



/* PRIMARY NEGATIVE BUTTON
----------------------------------------------------------------------------------------------------*/

button.primaryNegativeCta,
a.primaryNegativeCta {
	background-color: #FFF;
	color: #333534;
	border: 2px solid #cadee5;
}

	button.primaryNegativeCta:hover,
	a.primaryNegativeCta:hover {
		background-color: #a2c5d3;
		color: #FFF;
		border: 2px solid #a2c5d3;
	}

	button.primaryNegativeCta:active,
	a.primaryNegativeCta:active {
		background-color: #91b1bd;
		color: #FFF;
		border: 2px solid #91b1bd;
	}

	/* Arrow Positions - Large */

	button.button.primaryNegativeCta .arrowUp,
	a.primaryNegativeCta .arrowUp {
		background-position: 100% -395px;
	}

	button.button.primaryNegativeCta .arrowDown,
	a.primaryNegativeCta .arrowDown {
		background-position: 100% -497px;
	}

	button.button.primaryNegativeCta .arrowNext,
	a.primaryNegativeCta .arrowNext {
		background-position: 100% -594px;
	}

	button.button.primaryNegativeCta .arrowPrev,
	a.primaryNegativeCta .arrowPrev {
		background-position: 0px -694px;
	}

	/* Arrow Positions - Small */

	button.smallButton.primaryNegativeCta .arrowUp,
	a.smallButton.primaryNegativeCta {
		background-position: 100% -395px;
	}

	button.smallButton.primaryNegativeCta .arrowDown,
	a.smallButton.primaryNegativeCta .arrowDown {
		background-position: 100% -496px;
	}

	button.smallButton.primaryNegativeCta .arrowNext,
	a.smallButton.primaryNegativeCta .arrowNext {
		background-position: 100% -593px;
	}

	button.smallButton.primaryNegativeCta .arrowPrev,
	a.smallButton.primaryNegativeCta .arrowPrev {
		background-position: 0px -693px;
	}

		/* RTL : Arrow Positions - Large */

		html.rtl button.button.primaryNegativeCta .arrowUp,
		html.rtl a.primaryNegativeCta .arrowUp {
			background-position: 0 -395px;
		}

		html.rtl button.button.primaryNegativeCta .arrowDown,
		html.rtl a.primaryNegativeCta .arrowDown {
			background-position: 0 -497px;
		}

		html.rtl button.button.primaryNegativeCta .arrowNext,
		html.rtl a.primaryNegativeCta .arrowNext {
			background-position: 0 -694px;
		}

		html.rtl button.button.primaryNegativeCta .arrowPrev,
		html.rtl a.primaryNegativeCta .arrowPrev {
			background-position: 100% -594px;
		}

		/* RTL : Arrow Positions - Small */

		html.rtl button.smallButton.primaryNegativeCta .arrowUp,
		html.rtl a.smallButton.primaryNegativeCta {
			background-position: 0 -395px;
		}

		html.rtl button.smallButton.primaryNegativeCta .arrowDown,
		html.rtl a.smallButton.primaryNegativeCta .arrowDown {
			background-position: 0 -496px;
		}

		html.rtl button.smallButton.primaryNegativeCta .arrowNext,
		html.rtl a.smallButton.primaryNegativeCta .arrowNext {
			background-position: 0 -693px;
		}

		html.rtl button.smallButton.primaryNegativeCta .arrowPrev,
		html.rtl a.smallButton.primaryNegativeCta .arrowPrev {
			background-position: 100% -593px;
		}



/* PREMIUM BUTTON
----------------------------------------------------------------------------------------------------*/

button.premiumCta,
a.premiumCta {
	background-color: #953cac;
	border: 2px solid #953cac;
}
	button.premiumCta:hover,
	a.premiumCta:hover {
		background-color: #7f3392;
		border: 2px solid #7f3392;
	}
	button.premiumCta:active,
	a.premiumCta:active {
		background-color: #68217a;
		border: 2px solid #68217a;
	}



/* PRREMIUM SECONDARY BUTTON
----------------------------------------------------------------------------------------------------*/

button.premiumSecondaryCta,
a.premiumSecondaryCta {
	background-color: #FFF;
	color: #953cac;
	border: 2px solid #953cac;
}

	button.premiumSecondaryCta:hover,
	a.premiumSecondaryCta:hover {
		background-color: #7f3392;
		color: #FFF;
		border: 2px solid #7f3392;
	}

	button.premiumSecondaryCta:active,
	a.premiumSecondaryCta:active {
		background-color: #68217a;
		color: #FFF;
		border: 2px solid #68217a;
	}

	/* Arrow Positions - Large */

	button.button.premiumSecondaryCta .arrowUp,
	a.button.premiumSecondaryCta .arrowUp {
		background-position: 100% -1195px;
	}

	button.button.premiumSecondaryCta .arrowDown,
	a.button.premiumSecondaryCta .arrowDown {
		background-position: 100% -1297px;
	}

	button.button.premiumSecondaryCta .arrowNext,
	a.button.premiumSecondaryCta .arrowNext {
		background-position: 100% -1394px;
	}

	button.button.premiumSecondaryCta .arrowPrev,
	a.button.premiumSecondaryCta .arrowPrev {
		background-position: 0 -1494px;
	}

	/* Arrow Positions - Small */

	button.smallButton.premiumSecondaryCta .arrowUp,
	a.smallButton.premiumSecondaryCta .arrowUp{
		background-position: 100% -1195px;
	}

	button.smallButton.premiumSecondaryCta .arrowDown,
	a.smallButton.premiumSecondaryCta .arrowDown {
		background-position: 100% -1296px;
	}

	button.smallButton.premiumSecondaryCta .arrowNext,
	a.smallButton.premiumSecondaryCta .arrowNext {
		background-position: 100% -1393px;
	}

	button.smallButton.premiumSecondaryCta .arrowPrev,
	a.smallButton.premiumSecondaryCta .arrowPrev {
		background-position: 0 -1493px;
	}

		/* RTL : Arrow Positions - Large */

		html.rtl button.button.premiumSecondaryCta .arrowUp,
		html.rtl a.button.premiumSecondaryCta .arrowUp {
			background-position: 0 -1195px;
		}

		html.rtl button.button.premiumSecondaryCta .arrowDown,
		html.rtl a.button.premiumSecondaryCta .arrowDown {
			background-position: 0 -1297px;
		}

		html.rtl button.button.premiumSecondaryCta .arrowNext,
		html.rtl a.button.premiumSecondaryCta .arrowNext {
			background-position: 0 -1494px;
		}

		html.rtl button.button.premiumSecondaryCta .arrowPrev,
		html.rtl a.button.premiumSecondaryCta .arrowPrev {
			background-position: 100% -1394px;
		}

		/* RTL : Arrow Positions - Small */

		html.rtl button.smallButton.premiumSecondaryCta .arrowUp,
		html.rtl a.smallButton.premiumSecondaryCta .arrowUp {
			background-position: 0 -1195px;
		}

		html.rtl button.smallButton.premiumSecondaryCta .arrowDown,
		html.rtl a.smallButton.premiumSecondaryCta .arrowDown {
			background-position: 0 -1296px;
		}

		html.rtl button.smallButton.premiumSecondaryCta .arrowNext,
		html.rtl a.smallButton.premiumSecondaryCta .arrowNext {
			background-position: 0 -1493px;
		}

		html.rtl button.smallButton.premiumSecondaryCta .arrowPrev,
		html.rtl a.smallButton.premiumSecondaryCta .arrowPrev {
			background-position: 100% -1393px;
		}



/* SECONDARY NEGATIVE BUTTON
----------------------------------------------------------------------------------------------------*/

button.secondaryCta,
a.secondaryCta {
	background-color: #FFF;
	color: #0078ca;
	border: 2px solid #00aff0;

}

	button.secondaryCta:hover,
	a.secondaryCta:hover {
		background-color: #00aff0;
		color: #FFF;
		border: 2px solid #00aff0;
	}

	button.secondaryCta:active,
	a.secondaryCta:active {
		background-color: #009dd8;
		color: #FFF;
		border: 2px solid #009dd8;
	}

	/* Arrow Positions - Large */

	button.button.secondaryCta .arrowUp,
	a.secondaryCta .arrowUp {
		background-position: 100% -795px;
	}

	button.button.secondaryCta .arrowDown,
	a.secondaryCta .arrowDown {
		background-position: 100% -897px;
	}

	button.button.secondaryCta .arrowNext,
	a.secondaryCta .arrowNext {
		background-position: 100% -994px;
	}

	button.button.secondaryCta .arrowPrev,
	a.secondaryCta .arrowPrev {
		background-position: 0 -1094px;
	}

	/* Arrow Positions - Small */

	button.smallButton.secondaryCta .arrowUp,
	a.smallButton.secondaryCta {
		background-position: 100% -795px;
	}

	button.smallButton.secondaryCta .arrowDown,
	a.smallButton.secondaryCta .arrowDown {
		background-position: 100% -896px;
	}

	button.smallButton.secondaryCta .arrowNext,
	a.smallButton.secondaryCta .arrowNext {
		background-position: 100% -993px;
	}

	button.smallButton.secondaryCta .arrowPrev,
	a.smallButton.secondaryCta .arrowPrev {
		background-position: 0 -1093px;
	}

		/* RTL : Arrow Positions - Large */

		html.rtl button.button.secondaryCta .arrowUp,
		html.rtl a.secondaryCta .arrowUp {
			background-position: 0 -795px;
		}

		html.rtl button.button.secondaryCta .arrowDown,
		html.rtl a.secondaryCta .arrowDown {
			background-position: 0 -897px;
		}

		html.rtl button.button.secondaryCta .arrowNext,
		html.rtl a.secondaryCta .arrowNext {
			background-position: 0 -1094px;
		}

		html.rtl button.button.secondaryCta .arrowPrev,
		html.rtl a.secondaryCta .arrowPrev {
			background-position: 100% -994px;
		}

		/* RTL : Arrow Positions - Small */

		html.rtl button.smallButton.secondaryCta .arrowUp,
		a.smallButton.secondaryCta {
			background-position: 0 -795px;
		}

		html.rtl button.smallButton.secondaryCta .arrowDown,
		html.rtl a.smallButton.secondaryCta .arrowDown {
			background-position: 0 -896px;
		}

		html.rtl button.smallButton.secondaryCta .arrowNext,
		html.rtl a.smallButton.secondaryCta .arrowNext {
			background-position: 0 -1093px;
		}

		html.rtl button.smallButton.secondaryCta .arrowPrev,
		html.rtl a.smallButton.secondaryCta .arrowPrev {
			background-position: 100% -993px;
		}



/* SECONDARY WHITE BUTTON
----------------------------------------------------------------------------------------------------*/

button.secondaryWhiteCta,
a.secondaryWhiteCta {
	color: #0078ca;
	background-color: #FFF;
	border: 2px solid #FFF;
}

	button.secondaryWhiteCta:hover,
	a.secondaryWhiteCta:hover {
		color: #333534;
		background-color: #FFF;
		border: 2px solid #FFF;
	}

	button.secondaryWhiteCta:active,
	a.secondaryWhiteCta:active {
		color: #333534;
		background-color: #e4eef2;
		border: 2px solid #e4eef2;
	}

	/* Arrow Positions - Large */

	button.button.secondaryWhiteCta .arrowUp,
	a.secondaryWhiteCta .arrowUp {
		background-position: 100% -795px;
	}

	button.button.secondaryWhiteCta .arrowDown,
	a.secondaryWhiteCta .arrowDown {
		background-position: 100% -897px;
	}

	button.button.secondaryWhiteCta .arrowNext,
	a.secondaryWhiteCta .arrowNext {
		background-position: 100% -994px;
	}

	button.button.secondaryWhiteCta .arrowPrev,
	a.secondaryWhiteCta .arrowPrev {
		background-position: 0 -1094px;
	}

	/* Arrow Positions - Small */

	button.smallButton.secondaryWhiteCta .arrowUp,
	a.smallButton.secondaryWhiteCta {
		background-position: 100% -795px;
	}

	button.smallButton.secondaryWhiteCta .arrowDown,
	a.smallButton.secondaryWhiteCta .arrowDown {
		background-position: 100% -897px;
	}

	button.smallButton.secondaryWhiteCta .arrowNext,
	a.smallButton.secondaryWhiteCta .arrowNext {
		background-position: 100% -994px;
	}

	button.smallButton.secondaryWhiteCta .arrowPrev,
	a.smallButton.secondaryWhiteCta .arrowPrev {
		background-position: 0 -1094px;
	}

		/* RTL : Arrow Positions - Large */

		html.rtl button.button.secondaryWhiteCta .arrowUp,
		html.rtl a.secondaryWhiteCta .arrowUp {
			background-position: 0 -797px;
		}

		html.rtl button.button.secondaryWhiteCta .arrowDown,
		html.rtl a.secondaryWhiteCta .arrowDown {
			background-position: 0 -899px;
		}

		html.rtl button.button.secondaryWhiteCta .arrowNext,
		html.rtl a.secondaryWhiteCta .arrowNext {
			background-position: 0 -1097px;
		}

		html.rtl button.button.secondaryWhiteCta .arrowPrev,
		html.rtl a.secondaryWhiteCta .arrowPrev {
			background-position: 100% -997px;
		}

		/* RTL : Arrow Positions - Small */

		html.rtl button.smallButton.secondaryWhiteCta .arrowUp,
		a.smallButton.secondaryWhiteCta {
			background-position: 0 -799px;
		}

		html.rtl button.smallButton.secondaryWhiteCta .arrowDown,
		html.rtl a.smallButton.secondaryWhiteCta .arrowDown {
			background-position: 0 -900px;
		}

		html.rtl button.smallButton.secondaryWhiteCta .arrowNext,
		html.rtl a.smallButton.secondaryWhiteCta .arrowNext {
			background-position: 0 -1097px;
		}

		html.rtl button.smallButton.secondaryWhiteCta .arrowPrev,
		html.rtl a.smallButton.secondaryWhiteCta .arrowPrev {
			background-position: 100% -997px;
		}



/* GENERAL ARROW STYLES
----------------------------------------------------------------------------------------------------*/


/* GENERAL ARROW STYLES - Large (default always white) */

.button .arrowUp,
a.button:active .arrowUp,
button.button:active .arrowUp,
a.button:hover .arrowUp,
button.button:hover .arrowUp {
	background-position: 100% 5px;
	padding-right: 27px;
}

.button .arrowDown,
a.button:active .arrowDown,
button.button:active .arrowDown,
a.button:hover .arrowDown,
button.button:hover .arrowDown {
	background-position: 100% -97px;
	padding-right: 27px;
}

.button .arrowNext,
a.button:active .arrowNext,
button.button:active .arrowNext,
a.button:hover .arrowNext,
button.button:hover .arrowNext {
	background-position: 100% -194px;
	padding-right: 27px;
}

.button .arrowPrev,
a.button:active .arrowPrev,
button.button:active .arrowPrev,
a.button:hover .arrowPrev,
button.button:hover .arrowPrev {
	background-position: 0px -294px;
	padding-left: 27px;
}

/* GENERAL ARROW STYLES - Small (default always white) */

.smallButton .arrowUp,
a.smallButton:active .arrowUp,
button.smallButton:active .arrowUp,
a.smallButton:hover .arrowUp,
button.smallButton:hover .arrowUp {
	background-position: 100% 5px;
	padding-right: 27px;
}

.smallButton .arrowDown,
a.smallButton:active .arrowDown,
button.smallButton:active .arrowDown,
a.smallButton:hover .arrowDown,
button.smallButton:hover .arrowDown {
	background-position: 100% -96px;
	padding-right: 27px;
}

.smallButton .arrowNext,
a.smallButton:active .arrowNext,
button.smallButton:active .arrowNext,
a.smallButton:hover .arrowNext,
button.smallButton:hover .arrowNext {
	background-position: 100% -193px;
	padding-right: 27px;
}

.smallButton .arrowPrev,
a.smallButton:active .arrowPrev,
button.smallButton:active .arrowPrev,
a.smallButton:hover .arrowPrev,
button.smallButton:hover .arrowPrev {
	background-position: 0px -293px;
	padding-left: 27px;
}

	/* RTL : GENERAL ARROW STYLES - Large (default always white) */

	html.rtl .button .arrowUp,
	html.rtl a.button:active .arrowUp,
	html.rtl button.button:active .arrowUp,
	html.rtl a.button:hover .arrowUp,
	html.rtl button.button:hover .arrowUp {
		background-position: 0 3px;
		padding-left: 27px;
		padding-right: 0;
	}

	html.rtl .button .arrowDown,
	html.rtl a.button:active .arrowDown,
	html.rtl button.button:active .arrowDown,
	html.rtl a.button:hover .arrowDown,
	html.rtl button.button:hover .arrowDown {
		background-position: 0 -99px;
		padding-left: 27px;
		padding-right: 0px;
	}

	html.rtl .button .arrowNext,
	html.rtl a.button:active .arrowNext,
	html.rtl button.button:active .arrowNext,
	html.rtl a.button:hover .arrowNext,
	html.rtl button.button:hover .arrowNext {
		background-position: 0 -297px;
		padding-left: 27px;
		padding-right: 0;
	}

	html.rtl .button .arrowPrev,
	html.rtl a.button:active .arrowPrev,
	html.rtl button.button:active .arrowPrev,
	html.rtl a.button:hover .arrowPrev,
	html.rtl button.button:hover .arrowPrev {
		background-position: 100% -197px;
		padding-right: 27px;
		padding-left: 0px;
	}

	/* RTL : GENERAL ARROW STYLES - Small (default always white) */

	html.rtl .smallButton .arrowUp,
	html.rtl a.smallButton:active .arrowUp,
	html.rtl button.smallButton:active .arrowUp,
	html.rtl a.smallButton:hover .arrowUp,
	html.rtl button.smallButton:hover .arrowUp {
		background-position: 0 1px;
		padding-left: 27px;
		padding-right: 0;
	}

	html.rtl .smallButton .arrowDown,
	html.rtl a.smallButton:active .arrowDown,
	html.rtl button.smallButton:active .arrowDown,
	html.rtl a.smallButton:hover .arrowDown,
	html.rtl button.smallButton:hover .arrowDown {
		background-position: 0 -99px;
		padding-left: 27px;
		padding-right: 0;
	}

	html.rtl .smallButton .arrowNext,
	html.rtl a.smallButton:active .arrowNext,
	html.rtl button.smallButton:active .arrowNext,
	html.rtl a.smallButton:hover .arrowNext,
	html.rtl button.smallButton:hover .arrowNext {
		background-position: 0 -297px;
		padding-left: 27px;
		padding-right: 0;
	}

	html.rtl .smallButton .arrowPrev,
	html.rtl a.smallButton:active .arrowPrev,
	html.rtl button.smallButton:active .arrowPrev,
	html.rtl a.smallButton:hover .arrowPrev,
	html.rtl button.smallButton:hover .arrowPrev {
		background-position: 100% -197px;
		padding-right: 27px;
		padding-left: 0;
	}


/* Secondary white has different arrow color for hover and active */

a.secondaryWhiteCta:active .arrowUp,
button.secondaryWhiteCta:active .arrowUp,
a.secondaryWhiteCta:hover .arrowUp,
button.secondaryWhiteCta:hover .arrowUp {
	background-position: 100% -395px;
	padding-right: 27px;
}

a.secondaryWhiteCta:active .arrowDown,
button.secondaryWhiteCta:active .arrowDown,
a.secondaryWhiteCta:hover .arrowDown,
button.secondaryWhiteCta:hover .arrowDown {
	background-position: 100% -497px;
	padding-right: 27px;
}

a.secondaryWhiteCta:active .arrowNext,
button.secondaryWhiteCta:active .arrowNext,
a.secondaryWhiteCta:hover .arrowNext,
button.secondaryWhiteCta:hover .arrowNext {
	background-position: 100% -594px;
	padding-right: 27px;
}

a.secondaryWhiteCta:active .arrowPrev,
button.secondaryWhiteCta:active .arrowPrev,
a.secondaryWhiteCta:hover .arrowPrev,
button.secondaryWhiteCta:hover .arrowPrev {
	background-position: 0px -694px;
	padding-left: 27px;
}




	/* small button hover and active*/

	/*
	a.smallButton:active .arrowUp,
	button.smallButton:active .arrowUp,
	a.smallButton:hover .arrowUp,
	button.smallButton:hover .arrowUp {
		background-position: 100% -399px;
		padding-right: 27px;
	}

	a.smallButton:active .arrowDown,
	button.smallButton:active .arrowDown,
	a.smallButton:hover .arrowDown,
	button.smallButton:hover .arrowDown {
		background-position: 100% -500px;
		padding-right: 27px;
	}

	a.smallButton:active .arrowNext,
	button.smallButton:active .arrowNext,
	a.smallButton:hover .arrowNext,
	button.smallButton:hover .arrowNext {
		background-position: 100% -597px;
		padding-right: 27px;
	}

	a.smallButton:active .arrowPrev,
	button.smallButton:active .arrowPrev,
	a.smallButton:hover .arrowPrev,
	button.smallButton:hover .arrowPrev {
		background-position: 0px -697px;
		padding-left: 27px;
	}


*/



/* DUAL LINE BUTTON (Special Case)
----------------------------------------------------------------------------------------------------*/


/* Dual Line Button (special case) */

a.dualLineCta,
button.dualLineCta {
	position: relative;
	padding-left: 64px;
	text-align: center;
	line-height: 20px;
}

	a .dualLineCta span,
	button .dualLineCta span,
	a .dualLineMobileCta span,
	button .dualLineMobileCta span {
		margin: 0;
	}

	.dualLineCta {
		position: relative;
		display: inline-block;
		padding: 0 45px 0 20px;
	}

	.dualLineCta .arrowDown,
	.dualLineCta .arrowUp,
	.dualLineCta .arrowNext,
	.dualLineCta .arrowPrev {
		position: absolute;
		display: inline-block;
	}

		.dualLineCta .arrowNext,
		.dualLineCta .arrowPrev {
			width: 18px;
			height: 25px;
		}

		.dualLineCta .arrowDown,
		.dualLineCta .arrowUp {
			width: 15px;
			height: 25px;
		}

	.buttonText {
		display: inline-block;
	}

		.buttonText .lineOne,
		.buttonText .lineTwo {
			display: block;
		}

			.dualLineMobileCta .buttonText .lineOne {
				font-size: 16px;
			}

			.dualLineMobileCta .buttonText .lineTwo {
				font-size: 20px;
			}

	.dualLineCta .arrowDown {
		right: 20px;
		top: 50%;
		margin-top: -11px;
	}

	html.rtl .dualLineCta {
		position: relative;
		display: inline-block;
		padding: 0 20px 0 45px;
	}

	html.rtl .dualLineCta .arrowDown {
		width: 15px;
		height: 25px;
		left: 20px;
		right: auto;
		top: 50%;
	}

a.button .dualLineMobileCta,
button.button .dualLineMobileCta {
	position: relative;
	display: inline-block;
	padding: 0 20px 0 20px;
}



/* OVERRIDES FOR TABLET
----------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 959px) {

}



/* OVERRIDES FOR MOBILE
----------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {

		button.button,
		a.button,
		button.smallButton,
		a.smallButton {
			line-height: 20px;
			font-size: 18px;
			text-align: center;
			display: block;
			padding-top: 8px;
			padding-bottom: 11px;
			padding-right: 0;
			padding-left: 0;
			margin: 0 auto;
		}

		a.smallButton,
		a.button {
			display: block;
			max-width: 440px;
			width: 87.5%;
		}

		button.smallButton,
		button.button {
			width: 87.5%;
			max-width: 440px;
		}

		a.smallButton.fixedButton,
		a.button.fixedButton,
		button.smallButton.fixedButton,
		button.button.fixedButton {
			max-width: 280px;
			width: 280px;
		}

		a.button.premiumSecondaryCta,
		a.button.secondaryCta,
		a.button.primaryNegativeCta,
		a.smallButton.premiumSecondaryCta,
		a.smallButton.secondaryCta,
		a.smallButton.primaryNegativeCta {
			padding-right: 0;
			padding-left: 0;
		}

		.button.iconRight,
		.smallButton.iconRight {
			padding-right: 0;
		}

		.button.iconLeft,
		.smallButton.iconLeft {
			padding-left: 0;
		}


	.lineOne {
		font-size: 16px;
	}

	.lineTwo {
		font-size: 18px;
	}


	/* OVERIDES FOR MOBILE ARROW POSITIONS
----------------------------------------------------------------------------------------------------*/


	/* PRIMARY NEGATIVE
	-------------------------------------*/

	button.button.primaryNegativeCta .arrowUp,
	a.primaryNegativeCta .arrowUp,
	button.smallButton.primaryNegativeCta .arrowUp,
	a.smallButton.primaryNegativeCta {
		background-position: 100% -397px;
	}

	button.button.primaryNegativeCta .arrowDown,
	a.primaryNegativeCta .arrowDown,
	button.smallButton.primaryNegativeCta .arrowDown,
	a.smallButton.primaryNegativeCta .arrowDown {
		background-position: 100% -498px;
	}

	button.button.primaryNegativeCta .arrowNext,
	a.primaryNegativeCta .arrowNext,
	button.smallButton.primaryNegativeCta .arrowNext,
	a.smallButton.primaryNegativeCta .arrowNext {
		background-position: 100% -596px;
	}

	button.button.primaryNegativeCta .arrowPrev,
	a.primaryNegativeCta .arrowPrev,
	button.smallButton.primaryNegativeCta .arrowPrev,
	a.smallButton.primaryNegativeCta .arrowPrev {
		background-position: 0px -696px;
	}

		/* RTL : PRIMARY NEGATIVE */

		html.rtl button.button.primaryNegativeCta .arrowUp,
		html.rtl a.primaryNegativeCta .arrowUp,
		html.rtl button.smallButton.primaryNegativeCta .arrowUp,
		html.rtl a.smallButton.primaryNegativeCta {
			background-position: 0 -397px;
		}

		html.rtl button.button.primaryNegativeCta .arrowDown,
		html.rtl a.primaryNegativeCta .arrowDown,
		html.rtl button.smallButton.primaryNegativeCta .arrowDown,
		html.rtl a.smallButton.primaryNegativeCta .arrowDown {
			background-position: 0 -498px;
		}

		html.rtl button.button.primaryNegativeCta .arrowNext,
		html.rtl a.primaryNegativeCta .arrowNext,
		html.rtl button.smallButton.primaryNegativeCta .arrowNext,
		html.rtl a.smallButton.primaryNegativeCta .arrowNext {
			background-position: 0 -696px;
		}

		html.rtl button.button.primaryNegativeCta .arrowPrev,
		html.rtl a.primaryNegativeCta .arrowPrev,
		html.rtl button.smallButton.primaryNegativeCta .arrowPrev,
		html.rtl a.smallButton.primaryNegativeCta .arrowPrev {
			background-position: 100% -596px;
		}


	/* PREMIUM NEGATIVE
	-------------------------------------*/

	button.button.premiumSecondaryCta .arrowUp,
	a.button.premiumSecondaryCta .arrowUp,
	button.smallButton.premiumSecondaryCta .arrowUp,
	a.smallButton.premiumSecondaryCta .arrowUp {
		background-position: 100% -1197px;
	}

	button.button.premiumSecondaryCta .arrowDown,
	a.button.premiumSecondaryCta .arrowDown,
	button.smallButton.premiumSecondaryCta .arrowDown,
	a.smallButton.premiumSecondaryCta .arrowDown {
		background-position: 100% -1298px;
	}

	button.button.premiumSecondaryCta .arrowNext,
	a.button.premiumSecondaryCta .arrowNext,
	button.smallButton.premiumSecondaryCta .arrowNext,
	a.smallButton.premiumSecondaryCta .arrowNext {
		background-position: 100% -1396px;
	}

	button.button.premiumSecondaryCta .arrowPrev,
	a.button.premiumSecondaryCta .arrowPrev,
	button.smallButton.premiumSecondaryCta .arrowPrev,
	a.smallButton.premiumSecondaryCta .arrowPrev {
		background-position: 0 -1496px;
	}

		/* RTL : PREMIUM NEGATIVE */

		html.rtl button.button.premiumSecondaryCta .arrowUp,
		html.rtl a.button.premiumSecondaryCta .arrowUp,
		html.rtl button.smallButton.premiumSecondaryCta .arrowUp,
		html.rtl a.smallButton.premiumSecondaryCta .arrowUp {
			background-position: 0 -1197px;
		}

		html.rtl button.button.premiumSecondaryCta .arrowDown,
		html.rtl a.button.premiumSecondaryCta .arrowDown,
		html.rtl button.smallButton.premiumSecondaryCta .arrowDown,
		html.rtl a.smallButton.premiumSecondaryCta .arrowDown {
			background-position: 0 -1298px;
		}

		html.rtl button.button.premiumSecondaryCta .arrowNext,
		html.rtl a.button.premiumSecondaryCta .arrowNext,
		html.rtl button.smallButton.premiumSecondaryCta .arrowNext,
		html.rtl a.smallButton.premiumSecondaryCta .arrowNext {
			background-position: 0 -1496px;
		}

		html.rtl button.button.premiumSecondaryCta .arrowPrev,
		html.rtl a.button.premiumSecondaryCta .arrowPrev,
		html.rtl button.smallButton.premiumSecondaryCta .arrowPrev,
		html.rtl a.smallButton.premiumSecondaryCta .arrowPrev {
			background-position: 100% -1396px;
		}


	/* SECONDARY NEGATIVE
	-------------------------------------*/

	button.button.secondaryCta .arrowUp,
	a.secondaryCta .arrowUp,
	button.smallButton.secondaryCta .arrowUp,
	a.smallButton.secondaryCta {
		background-position: 100% -797px;
	}

	button.button.secondaryCta .arrowDown,
	a.secondaryCta .arrowDown,
	button.smallButton.secondaryCta .arrowDown,
	a.smallButton.secondaryCta .arrowDown {
		background-position: 100% -898px;
	}

	button.button.secondaryCta .arrowNext,
	a.secondaryCta .arrowNext,
	button.smallButton.secondaryCta .arrowNext,
	a.smallButton.secondaryCta .arrowNext {
		background-position: 100% -996px;
	}

	button.button.secondaryCta .arrowPrev,
	a.secondaryCta .arrowPrev,
	button.smallButton.secondaryCta .arrowPrev,
	a.smallButton.secondaryCta .arrowPrev {
		background-position: 0 -1096px;
	}

		/* RTL : SECONDARY NEGATIVE */

		html.rtl button.button.secondaryCta .arrowUp,
		html.rtl a.secondaryCta .arrowUp,
		html.rtl button.smallButton.secondaryCta .arrowUp,
		a.smallButton.secondaryCta {
			background-position: 0 -797px;
		}

		html.rtl button.button.secondaryCta .arrowDown,
		html.rtl a.secondaryCta .arrowDown,
		html.rtl button.smallButton.secondaryCta .arrowDown,
		html.rtl a.smallButton.secondaryCta .arrowDown {
			background-position: 0 -898px;
		}

		html.rtl button.button.secondaryCta .arrowNext,
		html.rtl a.secondaryCta .arrowNext,
		html.rtl button.smallButton.secondaryCta .arrowNext,
		html.rtl a.smallButton.secondaryCta .arrowNext {
			background-position: 0 -1096px;
		}

		html.rtl button.button.secondaryCta .arrowPrev,
		html.rtl a.secondaryCta .arrowPrev,
		html.rtl button.smallButton.secondaryCta .arrowPrev,
		html.rtl a.smallButton.secondaryCta .arrowPrev {
			background-position: 100% -996px;
		}


	/* SECONDARY WHITE
	-------------------------------------*/

	button.button.secondaryWhiteCta .arrowUp,
	a.secondaryWhiteCta .arrowUp,
	button.smallButton.secondaryWhiteCta .arrowUp,
	a.smallButton.secondaryWhiteCta {
		background-position: 100% -797px;
	}

	button.button.secondaryWhiteCta .arrowDown,
	a.secondaryWhiteCta .arrowDown,
	button.smallButton.secondaryWhiteCta .arrowDown,
	a.smallButton.secondaryWhiteCta .arrowDown {
		background-position: 100% -898px;
	}

	button.button.secondaryWhiteCta .arrowNext,
	a.secondaryWhiteCta .arrowNext,
	button.smallButton.secondaryWhiteCta .arrowNext,
	a.smallButton.secondaryWhiteCta .arrowNext {
		background-position: 100% -996px;
	}

	button.button.secondaryWhiteCta .arrowPrev,
	a.secondaryWhiteCta .arrowPrev,
	button.smallButton.secondaryWhiteCta .arrowPrev,
	a.smallButton.secondaryWhiteCta .arrowPrev {
		background-position: 0 -1096px;
	}

		/* RTL : SECONDARY WHITE */

		html.rtl button.button.secondaryWhiteCta .arrowUp,
		html.rtl a.secondaryWhiteCta .arrowUp,
		html.rtl button.smallButton.secondaryWhiteCta .arrowUp,
		a.smallButton.secondaryWhiteCta {
			background-position: 0 -797px;
		}

		html.rtl button.button.secondaryWhiteCta .arrowDown,
		html.rtl a.secondaryWhiteCta .arrowDown,
		html.rtl button.smallButton.secondaryWhiteCta .arrowDown,
		html.rtl a.smallButton.secondaryWhiteCta .arrowDown {
			background-position: 0 -898px;
		}

		html.rtl button.button.secondaryWhiteCta .arrowNext,
		html.rtl a.secondaryWhiteCta .arrowNext,
		html.rtl button.smallButton.secondaryWhiteCta .arrowNext,
		html.rtl a.smallButton.secondaryWhiteCta .arrowNext {
			background-position: 0 -1096px;
		}

		html.rtl button.button.secondaryWhiteCta .arrowPrev,
		html.rtl a.secondaryWhiteCta .arrowPrev,
		html.rtl button.smallButton.secondaryWhiteCta .arrowPrev,
		html.rtl a.smallButton.secondaryWhiteCta .arrowPrev {
			background-position: 100% -996px;
		}


	/* GENERIC BUTTONS
	-------------------------------------*/

	.button .arrowUp,
	a.button:active .arrowUp,
	button.button:active .arrowUp,
	a.button:hover .arrowUp,
	button.button:hover .arrowUp,
	.smallButton .arrowUp,
	a.smallButton:active .arrowUp,
	button.smallButton:active .arrowUp,
	a.smallButton:hover .arrowUp,
	button.smallButton:hover .arrowUp {
		background-position: 100% 3px;
	}

	.button .arrowDown,
	a.button:active .arrowDown,
	button.button:active .arrowDown,
	a.button:hover .arrowDown,
	button.button:hover .arrowDown,
	.smallButton .arrowDown,
	a.smallButton:active .arrowDown,
	button.smallButton:active .arrowDown,
	a.smallButton:hover .arrowDown,
	button.smallButton:hover .arrowDown {
		background-position: 100% -98px;
	}

	.button .arrowNext,
	a.button:active .arrowNext,
	button.button:active .arrowNext,
	a.button:hover .arrowNext,
	button.button:hover .arrowNext,
	.smallButton .arrowNext,
	a.smallButton:active .arrowNext,
	button.smallButton:active .arrowNext,
	a.smallButton:hover .arrowNext,
	button.smallButton:hover .arrowNext {
		background-position: 100% -196px;
	}

	.button .arrowPrev,
	a.button:active .arrowPrev,
	button.button:active .arrowPrev,
	a.button:hover .arrowPrev,
	button.button:hover .arrowPrev,
	.smallButton .arrowPrev,
	a.smallButton:active .arrowPrev,
	button.smallButton:active .arrowPrev,
	a.smallButton:hover .arrowPrev,
	button.smallButton:hover .arrowPrev {
		background-position: 0px -296px;
	}

		/* RTL : GENERIC BUTTONS */

		html.rtl .button .arrowUp,
		html.rtl a.button:active .arrowUp,
		html.rtl button.button:active .arrowUp,
		html.rtl a.button:hover .arrowUp,
		html.rtl button.button:hover .arrowUp,
		html.rtl .smallButton .arrowUp,
		html.rtl a.smallButton:active .arrowUp,
		html.rtl button.smallButton:active .arrowUp,
		html.rtl a.smallButton:hover .arrowUp,
		html.rtl button.smallButton:hover .arrowUp {
			background-position: 0 3px;
		}

		html.rtl .button .arrowDown,
		html.rtl a.button:active .arrowDown,
		html.rtl button.button:active .arrowDown,
		html.rtl a.button:hover .arrowDown,
		html.rtl button.button:hover .arrowDown,
		html.rtl .smallButton .arrowDown,
		html.rtl a.smallButton:active .arrowDown,
		html.rtl button.smallButton:active .arrowDown,
		html.rtl a.smallButton:hover .arrowDown,
		html.rtl button.smallButton:hover .arrowDown {
			background-position: 0 -98px;
		}

		html.rtl .button .arrowNext,
		html.rtl a.button:active .arrowNext,
		html.rtl button.button:active .arrowNext,
		html.rtl a.button:hover .arrowNext,
		html.rtl button.button:hover .arrowNext,
		html.rtl .smallButton .arrowNext,
		html.rtl a.smallButton:active .arrowNext,
		html.rtl button.smallButton:active .arrowNext,
		html.rtl a.smallButton:hover .arrowNext,
		html.rtl button.smallButton:hover .arrowNext {
			background-position: 0 -296px;
		}

		html.rtl .button .arrowPrev,
		html.rtl a.button:active .arrowPrev,
		html.rtl button.button:active .arrowPrev,
		html.rtl a.button:hover .arrowPrev,
		html.rtl button.button:hover .arrowPrev,
		html.rtl .smallButton .arrowPrev,
		html.rtl a.smallButton:active .arrowPrev,
		html.rtl button.smallButton:active .arrowPrev,
		html.rtl a.smallButton:hover .arrowPrev,
		html.rtl button.smallButton:hover .arrowPrev {
			background-position: 100% -196px;
		}


	/* SECONDARY WHITE COLOURS
	-------------------------------------*/

	a.secondaryWhiteCta:active .arrowUp,
	button.secondaryWhiteCta:active .arrowUp,
	a.secondaryWhiteCta:hover .arrowUp,
	button.secondaryWhiteCta:hover .arrowUp,
	html.rtl a.secondaryWhiteCta:active .arrowUp,
	html.rtl button.secondaryWhiteCta:active .arrowUp,
	html.rtl a.secondaryWhiteCta:hover .arrowUp,
	html.rtl button.secondaryWhiteCta:hover .arrowUp {
		background-position: 100% -397px;
	}

	a.secondaryWhiteCta:active .arrowDown,
	button.secondaryWhiteCta:active .arrowDown,
	a.secondaryWhiteCta:hover .arrowDown,
	button.secondaryWhiteCta:hover .arrowDown,
	html.rtl a.secondaryWhiteCta:active .arrowDown,
	html.rtl button.secondaryWhiteCta:active .arrowDown,
	html.rtl a.secondaryWhiteCta:hover .arrowDown,
	html.rtl button.secondaryWhiteCta:hover .arrowDown {
		background-position: 100% -498px;
	}

	a.secondaryWhiteCta:active .arrowNext,
	button.secondaryWhiteCta:active .arrowNext,
	a.secondaryWhiteCta:hover .arrowNext,
	button.secondaryWhiteCta:hover .arrowNext,
	html.rtl a.secondaryWhiteCta:active .arrowNext,
	html.rtl button.secondaryWhiteCta:active .arrowNext,
	html.rtl a.secondaryWhiteCta:hover .arrowNext,
	html.rtl button.secondaryWhiteCta:hover .arrowNext {
		background-position: 100% -596px;
	}

	a.secondaryWhiteCta:active .arrowPrev,
	button.secondaryWhiteCta:active .arrowPrev,
	a.secondaryWhiteCta:hover .arrowPrev,
	button.secondaryWhiteCta:hover .arrowPrev,
	html.rtl a.secondaryWhiteCta:active .arrowPrev,
	html.rtl button.secondaryWhiteCta:active .arrowPrev,
	html.rtl a.secondaryWhiteCta:hover .arrowPrev,
	html.rtl button.secondaryWhiteCta:hover .arrowPrev {
		background-position: 0px -696px;
	}

} /* End @media only screen and (max-width: 767px) */