/*Colors
Sky : #dbf0f1;
Sea : #b6e1e3;
Afternoon : #96d4cc;
Blue : #2aa0b2;
Dark Blue : #506d7e;
Orange : #c23d34;
Sunshine : #fcd869;
Tangerine: #fdc689;
Peach : #fef1e1;
-----------------------------------------*/
/*Sky Blue*/
.button-container a.dark-blue-button,
.button-container a.blue-button:hover,
.sky {color:#dbf0f1;}
.button-container a.blue-button::after,
.sky-back {background-color:#dbf0f1;}
.sky-border {border-color:#dbf0f1;}
.sky-fill {fill:#dbf0f1;}
/*Sea Blue*/
.sea {color:#b6e1e3;}
.sea-back {background-color:#b6e1e3;}
.sea-border {border-color:#b6e1e3;}
.sea-fill {fill:#b6e1e3;}
/*Afternoon Blue*/
.afternoon {color:#96d4cc;}
.afternoon-back {background-color:#96d4cc;}
.button-container a.dark-blue-button::before,
.afternoon-border {border-color:#96d4cc;}
.afternoon-fill {fill:#96d4cc;}
/*Blue*/
.button-container a.blue-button,
.blue {color:#2aa0b2;}
.button-container a.dark-blue-button::after,
.button-container a.blue-button:hover::after,
.blue-back {background-color:#2aa0b2;}
.button-container a.dark-blue-button:hover::before,
.button-container a.blue-button:before,
.blue-border {border-color:#2aa0b2;}
.blue-fill {fill:#2aa0b2;}
/*Dark Blue*/
.dark_blue {color:#506d7e;}
.dark_blue-back {background-color:#506d7e;}
.dark_blue-border {border-color:#506d7e;}
.dark_blue-fill {fill:#506d7e;}
/*Orange*/
.button-container a.orange-button,
.orange {color:#c23d34;}
.button-container a.dark-orange-button:after,
.button-container a.orange-button:hover::after,
.orange-back {background-color:#c23d34;}
.button-container a.orange-button::before,
.button-container a.dark-orange-button:hover::before,
.orange-border {border-color:#c23d34;}
.orange-fill {fill:#c23d34;}
/*Sunshine*/
.sunshine {color:#fcd869;}
.sunshine-back {background-color:#fcd869;}
.sunshine-border {border-color:#fcd869;}
.sunshine-fill {fill:#fcd869;}
/*Tangerine*/
.button-container a.dark-orange-button,
.tangerine {color:#fdc689;}
.button-container a.orange-button::after,
.tangerine-back {background-color:#fdc689;}
.button-container a.dark-orange-button:before,
.tangerine-border {border-color:#fdc689;}
.tangerine-fill {fill:#fdc689;}
/*Peach*/
.button-container a.dark-orange-button:hover,
.button-container a.orange-button:hover,
.peach {color:#fef1e1;}
.peach-back {background-color:#fef1e1;}
.peach-border {border-color:#fef1e1;}
.peach-fill {fill:#fef1e1;}
/*White*/
.white {color: #fff;}
.white-back {background-color:#fff;}
.white-border {border-color:#fff;}
.white-fill {fill:#fff;}
/*transparent*/
.transparent {color: transparent;}
.price-grid-key-attribute-item:nth-child(odd),
.transparent-back {background-color: transparent;}
.transparent-border {border-color: transparent;}
.transparent-fill {fill: transparent;}
/*Fonts*/
body,
.font_saira {font-family: 'Saira', sans-serif;}
.font_roboto {font-family: 'Roboto', sans-serif;}
/*Font Sizes*/
.reg-button,
.font_med {font-size: 18px}
.large-button,
.font_lg {font-size: 22px;}
.xl-button,
.font_xl {font-size: 24px;}
.xxl-button,
.font_xxl {font-size: 28px;}
.font_xxxl {font-size: 36px}
@media (min-width: 768px) {
	.font_small {font-size: 14px;}
	.font_normal {font-size: 18px;}
	.reg-button,
	.font_med {font-size: 20px}
	.large-button,
	.font_lg {font-size: 24px;}
	.xl-button,
	.font_xl {font-size: 28px;}
	.xxl-button,
	.font_xxl {font-size: 36px;}
	.font_xxxl {font-size: 48px}
}
/* BUTTON STYLES
---------------------------------------------------------------*/
/*button*/
.button-container {
	display: inline-block;
	position: relative;
	padding: 20px 0;
	margin: 0 auto;
}
	.button-container a.postage-button {
		position: relative;
		line-height: 100%;
		text-decoration: none;
		font-weight: bold;
		transition: all .25s;
		white-space: nowrap;
		display: block;
		z-index: 0;
	}
	.button-container a.postage-button::before,
	.button-container a.postage-button::after {
		content: '';
		height: 80%;
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transition: all .25s;
		box-sizing: border-box;
	}
	.button-container a.postage-button::before {
		transform: translateX(-52.5%) translateY(-55%);
		border-width: 2px;
		border-style: solid;
		z-index: 1;
	}
	.button-container a.postage-button::after {
		transform: translateX(-47.5%) translateY(-40%);
		z-index: -1;
	}
	.button-container a.postage-button:hover::after,
	.button-container a.postage-button:hover::before {
		transform: translateX(-50%) translateY(-50%);
	}
		
	a.reg-button {padding: 15px 30px;}
	a.large-button {padding: 20px 40px;}
	a.xl-button {padding: 25px 50px;}
	a.xxl-button {padding: 30px 60px;}
	/* ARROW BUTTON */
	a.reg-button.arrow-button {padding-right: 70px;}
	a.large-button.arrow-button {padding-right: 90px;}
	a.xl-button.arrow-button {padding-right: 110px;}
	a.xxl-button.arrow-button {padding-right: 140px;}
		a.arrow-button em {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			height: 50%;
			color: inherit;
		}
		a.reg-button.arrow-button em {
			right: 35px;
			width: 20px;
		}
		a.large-button.arrow-button em {
			right: 40px;
			width: 30px;
		}
		a.xl-button.arrow-button em {
			right: 45px;
			width: 40px;
		}
		a.xxl-button.arrow-button em {
			right: 60px;
			width: 50px;
		}
				a.arrow-button em::before,
				a.arrow-button em::after {
					content: '';	
					position: absolute;
					border-style: solid;
					right: 0;
					top: 50%;
				}
				a.arrow-button em::before {
					transform: translateY(-50%) rotate(45deg);
					right: 0;
					border-left: 0;
					border-bottom: 0;
				}
				a.arrow-button em::after {
					transform:translateY(-50%);
					width: 100%;
				}
				a.reg-button.arrow-button em::before {
					height: 10px;
					width: 10px;
					border-width: 2px;
				}
				a.reg-button.arrow-button em::after {
					border-width: 1px;
				}
				a.large-button.arrow-button em::before {
					height: 13px;
					width: 13px;
					border-width: 2px;
				}
				a.large-button.arrow-button em::after {
					border-width: 1px;
				}
				a.xl-button.arrow-button em::before {
					height: 16px;
					width: 16px;
					border-width: 2px;
				}
				a.xl-button.arrow-button em::after {
					border-width: 1px;
				}
				a.xxl-button.arrow-button em::before {
					height: 20px;
					width: 20px;
					border-width: 4px;
				}
				a.xxl-button.arrow-button em::after {
					border-width: 2px;
				}