/**
 * This is an extension to use the mini-basket functionality of Miva in an
 * off-canvas method.
 */
.x-mini-basket {
	display: flex;
	justify-content: flex-end;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	transform: scaleX(0);
	transform-origin: right;
	transition: all ease-in-out 0.2s;
	z-index: 500;
	opacity: 0;
}

.x-mini-basket--open {
	opacity: 1;
	transform: scaleX(1);
}

	.x-mini-basket__content {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 100vw;
		max-width: 30rem;
		padding: 1rem;
	}

	.x-mini-basket__header {
		display: flex;
		justify-content: space-between;
	}

	.x-mini-basket__list {
		overflow-y: auto;
	}

		.x-mini-basket__line {
			display: flex;
			margin-bottom: 2em;
			font-size: 0.875rem;
			flex-wrap: wrap;
		}

			.x-mini-basket__image {
				width: 5rem;
				height: 5rem;
				margin: 0 1em 0 0;
				overflow: hidden;
				text-align: center;
			}

			.x-mini-basket__item {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				text-decoration: none;
			}

			.x-mini-basket__item:hover {
				text-decoration: none;
			}

				.x-mini-basket__item-name {
					display: block;
					margin-bottom: 1em;
				}

				.x-mini-basket__subscription {
					flex-basis: 100%;
				}

				.x-mini-basket__item-total {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.x-mini-basket__item-total hr {
					margin: 0 0.75em;
					flex-grow: 1;
				}

	.x-mini-basket__footer {
	}

		.x-mini-basket__charges,
		.x-mini-basket__total,
		.x-mini-basket__cta {
			display: flex;
			flex-grow: 1;
			justify-content: space-between;
		}

		.x-mini-basket__charges {
			flex-direction: column;
			margin-bottom: 1em;
			font-size: 0.875rem;
		}

			.x-mini-basket__charge-item {
				display: flex;
				justify-content: space-between;
			}

		.x-mini-basket__total {
			margin-bottom: 1em;
		}

		.x-mini-basket__cta {
			font-size: 0.875rem;
		}

/*Extra Css for mini basket*/
	.u-bg-white::before,
		.u-bg-white {
			background-color: #fff;
	}

	c-control-group .c-control-group__button:first-child, .c-control-group .c-control-group__field:first-child {
    border-top-left-radius: 0.125em;
    border-bottom-left-radius: 0.125em;
	}

	.c-button--primary {
    background-color: #3d70b2;
    border-color: #3d70b2;
    color: #fff;
}

.c-button--full {
    display: block;
    width: 100%;
}

.c-control-group .c-control-group__button, .c-control-group .c-control-group__field {
    border-radius: 0;
}

/* ==========================================================================
   COMPONENTS / CONTROL GROUPS
   ========================================================================== */

/**
 * To group related buttons and/or inputs together, you can use the
 * `.c-control-group` wrapping element. This will bunch the related elements
 * together and remove the spacing between them.
 */

.c-control-group {
	display: flex;
}

	.c-control-group .c-control-group__label {
		height: calc(2.5em - (1px * 2));
		margin-bottom: 0;
		padding-right: calc(16px / 2);
		line-height: calc(2.5em - (1px * 2));
	}

	.c-control-group .c-control-group__button,
	.c-control-group .c-control-group__field {
		border-radius: 0;
	}

	.c-control-group .c-control-group__field {
		margin-bottom: 0;
	}
	
	.c-control-group .c-control-group__button:not(:first-child):not(:first-of-type),
	.c-control-group .c-control-group__field:not(:first-child):not(:first-of-type) {
		border-left-width: 0;
	}
	
	.c-control-group .c-control-group__button:first-child,
	.c-control-group .c-control-group__field:first-child {
		border-top-left-radius: 0.125em;
		border-bottom-left-radius: 0.125em;
	}
	
	.c-control-group .c-control-group__button:last-child,
	.c-control-group .c-control-group__field:last-child {
		border-top-right-radius: 0.125em;
		border-bottom-right-radius: 0.125em;
	}


	/**
	 * Adding the `.c-control-group--rounded` modifier will make the first and
	 * last related elements rounded.
	 */
	.c-control-group--rounded .c-control-group__button:first-child,
	.c-control-group--rounded .c-control-group__field:first-child {
		border-top-left-radius: 10em;
		border-bottom-left-radius: 10em;
	}

	.c-control-group--rounded .c-control-group__field:first-child {
		padding-left: 16px;
	}

	.c-control-group--rounded .c-control-group__button:last-child,
	.c-control-group--rounded .c-control-group__field:last-child {
		border-top-right-radius: 10em;
		border-bottom-right-radius: 10em;
	}
	
	/**
	 * Adding the `.c-control-group--rounded-right` modifier will make the last
	 * related element rounded.
	 */
	.c-control-group--rounded-right .c-control-group__button:last-child,
	.c-control-group--rounded-right .c-control-group__field:last-child {
		border-top-right-radius: 10em;
		border-bottom-right-radius: 10em;
	}
	
	/**
	 * Adding the `.c-control-group--rounded-left` modifier will make the first
	 * related element rounded.
	 */
	.c-control-group--rounded-left .c-control-group__button:first-child,
	.c-control-group--rounded-left .c-control-group__field:first-child {
		border-top-left-radius: 10em;
		border-bottom-left-radius: 10em;
	}

	
	/**
	 * Adding the `.c-control-group--stacked` modifier will turn the related
	 * elements into a vertical element.
	 */
	.c-control-group--stacked {
		flex-wrap: wrap;
	}
	
	.c-control-group--stacked .c-control-group__button:not(:first-child):not(:first-of-type),
	.c-control-group--stacked .c-control-group__field:not(:first-child):not(:first-of-type) {
		border-left-width: 1px;
	}
	
	.c-control-group--stacked .c-control-group__button,
	.c-control-group--stacked .c-control-group__field {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
	}
	
	.c-control-group--stacked .c-control-group__button:not(:first-child):not(:first-of-type),
	.c-control-group--stacked .c-control-group__field:not(:first-child):not(:first-of-type) {
		border-top: 0;
	}
	
	.c-control-group--stacked .c-control-group__button:not(:first-child):not(:last-child):not(:first-of-type):not(:last-of-type),
	.c-control-group--stacked .c-control-group__field:not(:first-child):not(:last-child):not(:first-of-type):not(:last-of-type) {
		border-radius: 0;
	}
	
	.c-control-group--stacked .c-control-group__button:first-child,
	.c-control-group--stacked .c-control-group__field:first-child {
		border-radius: 0.125em 0.125em 0 0;
	}
	
	.c-control-group--stacked .c-control-group__button:last-child,
	.c-control-group--stacked .c-control-group__field:last-child {
		border-radius: 0 0 0.125em 0.125em;
	}
/* ==========================================================================
   COMPONENTS / BUTTONS
   ========================================================================== */

/**
 * 1.  Allows styling of box model properties.
 * 2.  Reset browser styles.
 * 3.  Subtract border-width from the padding so buttons don't grow if the
 *     border-width is modified.
 * 4.  Tidy alignment for when the button size needs to be modified.
 * 5.  Make buttons inherit font styles (necessary when styling `input`s as
 *     buttons).
 * 6.  Set default button font-size.
 * 7.  Set default button font-weight.
 * 8.  Set default button text-alignment.
 * 9.  Remove anchor text-decoration (necessary when styling `a`s as buttons).
 * 10. Base transparent border for modifiers to alter.
 * 11. Set default button border-radius.
 * 12. Set default button transition (color, background-color, border-color and box-shadow)
 * 13. Force all button-styled elements to appear click-able.
 * 14. Remove browser outline styles.
 */
.c-button {
	display: inline-block; /* [1] */
	margin: 0; /* [2] */
	padding: calc(0.5em - 1px) calc(1em - 1px) !important; /* [3] */
	position: relative;
	vertical-align: middle; /* [4] */
	font-family: inherit; /* [5] */
	font-size: 1em; /* [6] */
	font-weight: 400; /* [7] */
	line-height: normal;
	text-align: center; /* [8] */
	text-decoration: none; /* [9] */
	background-color: #c0c0c0;
	border: 1px solid rgba(0, 0, 0, 0); /* [10] */
	border-radius: 0.125em; /* [11] */
	color: #fff;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer; /* [13] */
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* [12] */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.c-button:hover,
	.c-button:active,
	.c-button:focus {
		text-decoration: none; /* [9] */
		outline: none; /* [1] */
	}

	.c-button:not([class*="u-bg-"]):not([class*="c-button--primary"]):hover{
		background-color: #9a9a9a;
	}

	
/**
 * Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
 */
.c-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}


/* Button aesthetic modifiers
   =========================================== */
/**
* For buttons that identify as the primary action.
*/
.c-button--primary {
	background-color: #3d70b2;
	border-color: #3d70b2;
	color: #fff;
	
}

	.c-button--primary:hover,
	.c-button--primary:active {
		background-color: #4888c8;
		border-color: #4888c8;
	}


/**
* For outlined or hollow buttons.
*/
.c-button--hollow {
	background-color: rgba(0, 0, 0, 0);
	border-color: currentColor;
	color: #3d70b2;
	
}
.c-button--hollow:not([class*="u-bg-"]):hover{
	background-color: #eaeaea;
}


/**
* For buttons you want to look like normal links.
*/
.c-button--clear {
	background-color: rgba(0, 0, 0, 0);
	
}

	.c-button--clear:hover,
	.c-button--clear:active {
		border-bottom: 1px solid currentColor;
	}
	
	.c-button--clear:not([class*="u-bg-"]):hover{
		background-color: rgba(0, 0, 0, 0);
	}


/* Button state modifiers
   =========================================== */

/**
 * For buttons whose state is toggled.
 */
.c-button:disabled,
.c-button.is-disabled,
.c-button.is-disabled:hover,
.c-button.is-disabled:active,
.c-button.is-disabled:focus {
	color: #fff;
	background-color: #c0c0c0;
	border-color: #c0c0c0;
	cursor: not-allowed;
}

  
/**
* For buttons whose state is toggled when a related form or field contains
* an error or multiple errors.
*/
.c-button.is-error,
.c-button.is-error:hover,
.c-button.is-error:active,
.c-button.is-error:focus,
.is-error .c-button,
.is-error .c-button:hover,
.is-error .c-button:active,
.is-error .c-button:focus {
	background-color: #c8102e;
	border-color: #c8102e;
	color: #fff;
	cursor: not-allowed;
}





/* Button sizing modifiers
   =========================================== */
.c-button--tiny {
	padding: calc(0.5em / 2 - 1px) calc(1em / 2 - 1px); /* [3] */
	font-size: 0.625em;
}

.c-button--small {
	padding: calc(0.5em / 1.5 - 1px) calc(1em / 1.5 - 1px); /* [3] */
	font-size: 0.75em;
}

.c-button--large {
	padding: calc(0.5em * 2 - 1px) calc(1em * 2 - 1px); /* [3] */
}

.c-button--huge {
	padding: calc(0.5em * 3 - 1px) calc(1em * 3 - 1px); /* [3] */
}

.c-button--flush {
	padding-right: 0;
	padding-left: 0;
}


/**
* For buttons that need to display full-width on small devices only.
*/
.c-button--full-small {
	display: block;
	width: 100%;
}

/**
* For buttons that need to display full-width.
*/
.c-button--full {
	display: block;
	width: 100%;
}





/* Button glossy modifiers
   =========================================== */
.c-button--glossy {
	box-shadow: 0 1px 4px -2px #707070;
	text-shadow: 0 -1px #707070;
}

	.c-button--glossy::after {
		width: 100%;
		height: 50%;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
		border-radius: inherit;
		content: '';
	}
/* ==========================================================================
   UTILITIES / COLORS
   ========================================================================== */

/**
 * Utility classes to adjust element colors inline.
 * Both .u-bg-*** and .u-color-*** work for each color class.
 */

.u-bg-red::before,
.u-bg-red {
	background-color: #c8102e;
}

.u-bg-yellow::before,
.u-bg-yellow {
	background-color: #f9ed1f;
}

.u-bg-blue::before,
.u-bg-blue {
	background-color: #003b6f;
}

.u-bg-green::before,
.u-bg-green {
	background-color: #009a44;
}

.u-bg-black::before,
.u-bg-black {
	background-color: #0f0f0f;
}

.u-bg-gray-50::before,
.u-bg-gray-50 {
	background-color: #222;
}

.u-bg-gray-40::before,
.u-bg-gray-40 {
	background-color: #707070;
}

.u-bg-gray-30::before,
.u-bg-gray-30 {
	background-color: #9f9f9f;
}

.u-bg-gray-20::before,
.u-bg-gray-20 {
	background-color: #c0c0c0;
}

.u-bg-gray-10::before,
.u-bg-gray-10 {
	background-color: #eaeaea;
}

.u-bg-white::before,
.u-bg-white {
	background-color: #fff;
}

.u-bg-transparent {
	background-color: rgba(0, 0, 0, 0);
}

.u-bg-primary::before,
.u-bg-primary {
	background-color: #3d70b2;
}

.u-bg-secondary::before,
.u-bg-secondary {
	background-color: #5aaafa;
}

.u-bg-tertiary::before,
.u-bg-tertiary {
	background-color: #008571;
}

.u-bg-highlight::before,
.u-bg-highlight {
	background-color: #f9ed1f;
}

.u-bg-accent::before,
.u-bg-accent {
	background-color: #3cc;
}
.u-bg-site::before,
.u-bg-site{
	background-color: #991B1E;
}

.u-bg-olive::before,
.u-bg-olive{
	background-color: #3d9970;
}




.c-button:hover.u-bg-red {
	background-color: #a00c24;
}

.c-button:hover.u-bg-yellow {
	background-color: #c7bd19;
}

.c-button:hover.u-bg-blue {
	background-color: #34638b;
}
.c-button:hover.u-bg-site {
	background-color: #cbcbcb;
}

.c-button:hover.u-bg-olive {
	background-color: #cbcbcb;
}

.c-button:hover.u-bg-green {
	background-color: #007c36;
}

.c-button:hover.u-bg-black {
	background-color: #3f3f3f;
}

.c-button:hover.u-bg-gray-50 {
	background-color: #4e4e4e;
}

.c-button:hover.u-bg-gray-40 {
	background-color: #5a5a5a;
}

.c-button:hover.u-bg-gray-30 {
	background-color: #7f7f7f;
}

.c-button:hover.u-bg-gray-20 {
	background-color: #9a9a9a;
}

.c-button:hover.u-bg-gray-10 {
	background-color: #bcbcbc;
}

.c-button:hover.u-bg-white {
	background-color: #cbcbcb;
}

.c-button:hover.u-bg-primary {
	background-color: #315a8e;
}

.c-button:hover.u-bg-secondary {
	background-color: #4888c8;
}

.c-button:hover.u-bg-tertiary {
	background-color: #006b5b;
}

.c-button:hover.u-bg-highlight {
	background-color: #c7bd19;
}

.c-button:hover.u-bg-accent {
	background-color: #29a4a4;
}





.u-color-red {
	color: #c8102e;
}

.u-color-yellow {
	color: #f9ed1f;
}

.u-color-blue {
	color: #003b6f;
}

.u-color-green {
	color: #009a44;
}

.u-color-black {
	color: #0f0f0f;
}

.u-color-gray-50 {
	color: #222;
}

.u-color-gray-40 {
	color: #707070;
}

.u-color-gray-30 {
	color: #9f9f9f;
}

.u-color-gray-20 {
	color: #c0c0c0;
}

.u-color-gray-10 {
	color: #eaeaea;
}

.u-color-white {
	color: #fff;
}

.u-color-transparent {
	color: rgba(0, 0, 0, 0);
}

.u-color-primary {
	color: #3d70b2;
}

.u-color-secondary {
	color: #5aaafa;
}

.u-color-tertiary {
	color: #008571;
}

.u-color-highlight {
	color: #f9ed1f;
}

.u-color-accent {
	color: #3cc;
}






/**
 * This will make sure the full background of a layout object is filled.
 */
.o-layout[class*="u-bg-"] {
	position: relative;
	background-color: rgba(0, 0, 0, 0);
}

	.o-layout[class*="u-bg-"]::before {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 16px;
		content: '';
	}

		.o-layout--narrow[class*="u-bg-"]::before {
			left: calc(16px * 0.5);
		}
		
		.o-layout--wide[class*="u-bg-"]::before {
			left: calc(16px * 2);
		}
		
		.o-layout--flush[class*="u-bg-"]::before {
			left: 0;
		}
	
	.o-layout[class*="u-bg-"] > * {
		position: relative;
		z-index: 1;
	}
/* ==========================================================================
   UTILITIES / ICONS
   ========================================================================== */

/**
 * This contains the "@font-face" call needed to add the ReadyTheme Icons Font 
 * package to your site. These icons are available for use in addition to any 
 * theme-based icons which may be referenced in the "theme-fonts.css" file.
 */

@font-face {
	font-family: 'ReadyTheme Icons';
	font-style: normal;
	font-weight: normal;
	src: url('ReadyTheme.woff') format('woff');
}

[class^="u-icon-"],
[class*=" u-icon-"] {
	font-family: "ReadyTheme Icons", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-transform: none;
}

[class^="u-icon-"]::before,
[class*=" u-icon-"]::before {
	background-color: rgba(0, 0, 0, 0);
}

.u-icon-cross::before {
	content: "\3e";
}