:root {
	--cq-white 				: #fff;
	--cq-off-white 			: #f6f6f6;
	--cq-light-gray 		: #e2e2e2;
	--cq-gray 				: #ccc;
	--cq-dark-gray 			: #8f9296;
	--cq-black 				: #20262d;
	--cq-black-hover		: #44484d;
	--cq-teal-strong		: #28bbb5;
	--cq-teal-soft 			: #70bfbd;
	--cq-true-black 		: #000;
	--cq-teal-backgr-strong : #c3ebea;
	--cq-teal-backgr-light 	: #def4f3;
	--cq-status-good 		: #a6e867;
	--cq-status-neutral		: #feb63f;
	--cq-status-bad 		: #eb712f;
	--cq-status-worse 		: #d7311f;
	--cq-link		 		: #2b97df;
	--cq-link-active 		: #51b8fd;
}




body {
	background-color 		: var(--cq-off-white);
	font-family 			: 'ProbaPro', 'Helvetica', 'Arial', sans-serif;
	color 					: var(--cq-black);
	font-weight 			: 400;
	font-size 				: 14px;
	line-height 			: 18px;
}

.container {
	padding 				: 15px;
}

h1 {
	color 					: var(--cq-black);
	font-weight 			: 300;
	font-size 				: 27px;
	line-height 			: 34px;
}

h2 {
	color 					: var(--cq-teal-strong);
	font-weight 			: 500;
	font-size 				: 27px;
	line-height 			: 34px;
}

.inputGroup {
	border-bottom 			: 0.33px solid var(--cq-gray);
}

.inputGroup.first {
	border-top  			: 0.33px solid var(--cq-gray);
}

.inputGroup label {
	display 				: block;
	position 				: relative;
	padding 				: 0 15px;
	width 					: 100%;
	height 					: 50px;

	font-weight 			: 300;
	font-size 				: 20px;
	line-height 			: 50px;
	text-align 				: left;
	color 					: var(--cq-black);
	cursor 					: pointer;

	z-index: 2;

	-webkit-transition: color 200ms ease-in;
			transition: color 200ms ease-in;
	overflow: hidden;
}

.inputGroup label:after {
	width 					: 21px;
	height 					: 21px;
	position 				: absolute;
	right 					: 45px;
	top 					: 50%;

	content 				: "";
	border 					: 1px solid var(--cq-black);
	border-radius 			: 50%;

	background-color 		: #fff;
	background-image 		: url("data:image/svg+xml,<svg width='21' height='21' viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'><path d='M21,0 L21,21 L0,21 L0,0 L21,0 Z M10.5,5 C7.46243388,5 5,7.46243388 5,10.5 C5,13.5375661 7.46243388,16 10.5,16 C13.5375661,16 16,13.5375661 16,10.5 C16,7.46243388 13.5375661,5 10.5,5 Z' fill='%23fff' fill-rule='nonzero'/></svg>");
	background-repeat 		: no-repeat;
	background-position 	: 0 0;

	cursor 					: pointer;
	z-index 				: 2;
	-webkit-transform 		: translateY(-50%);
			transform 		: translateY(-50%);
	-webkit-transition		: all 200ms ease-in;
			transition 		: all 200ms ease-in;
}

.inputGroup input:checked ~ label {
	font-weight 			: 500;
}

.inputGroup input:checked ~ label:after {
	background-color 		: var(--cq-teal-strong);
}

.inputGroup input {
	display 				: none;
}

input[type=submit], button {
	background-color: var(--cq-black);
	width: 100%;
	height: 40px;
	margin:	40px 0;
	line-height: 30px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--cq-white);
	text-transform: uppercase;
	border-radius: 3px;
	border: none;
}

input[type=submit]:disabled, button.disabled {
	background-color: var(--cq-dark-gray);
	color: var(--cq-off-white);
	cursor: default;
}











/* page 2 */

.option {
	text-align: center;
	padding: 5px;
	margin: 15px 0 40px 0;
	position: relative;
}

.option.selected {
	background-color: var(--cq-teal-backgr-strong);
}

.option .price {
	width:100%;
	padding: 20px 0 0 0;

	font-size: 60px;
	line-height: 72px;
	font-weight: 100;
	text-align: center;
}

.option .price sup {
	font-size: 66%;
	position: relative;
	font-weight: 200;
	line-height: 0;
	vertical-align: baseline;
	top: -0.35em;
}

.option .descriptor {
	width:100%;
	padding: 0;

	font-size: 13px;
	line-height: 15px;
	letter-spacing: 1px;
	font-weight: 500;
	color: var(--cq-dark-gray);
	text-align: center;
}

.button {
	background-color: var(--cq-black);
	display 				: block;
	position 				: relative;
	width 					: 100%;
	height 					: 40px;
	margin 					: 15px 0;
	line-height 			: 30px;
	font-weight 			: 700;
	font-size 				: 14px;
	letter-spacing 			: 1px;
	color 					: var(--cq-white);
	text-transform 			: uppercase;
	border-radius 			: 3px;
	border 					: none;
	text-align 				: center;
	margin-top: 30px;
}

.button.secondary {
	background-color 		: transparent;
	color 					: var(--cq-black);
	text-transform 			: uppercase;
	border-radius 			: 3px;
	border 					: 0.33px solid var(--cq-gray);
}

.option .check {
	display 				: inline-block;
	height 					: 40px;
	margin 					: 15px 0;
	padding 				: 1px 0 0 23px;

	background-image 		: url("data:image/svg+xml,<svg width='20px' height='16px' viewBox='0 0 20 16' xmlns='http://www.w3.org/2000/svg'><g stroke='%231F252D' stroke-width='3' fill='none'><polyline points='1 6 6 11 16 1'></polyline></g></svg>");
	background-repeat 		: no-repeat;
	background-position 	: 0 12px;

	line-height 			: 40px;
	font-weight 			: 700;
	font-size 				: 14px;
	letter-spacing 			: 1px;
	color 					: var(--cq-black);
	text-transform 			: uppercase;
}

h3 {
	color 					: var(--cq-black);
	font-weight 			: 600;
	font-size 				: 20px;
	line-height 			: 26px;
	margin-bottom 			: 10px;
	padding-left 			: 15px;
}

table {
	border 					: none;
	border-collapse 		: collapse;
	border-bottom 			: 5px solid var(--cq-white);
	width 					: 100%
}

tr:nth-child(odd) {
	background-color 		: var(--cq-white);
}

td {
	height 					: 35px;
	padding 				: 0 15px;
}

tr td:nth-child(2) {
	text-align 				: right;
}

td.check {
	background-image 		: url("data:image/svg+xml,<svg width='20' height='16' viewBox='0 0 20 16' xmlns='http://www.w3.org/2000/svg'><g stroke='%231F252D' stroke-width='1' fill='none'><polyline points='1 6 6 11 16 1'></polyline></g></svg>");
	background-repeat 		: no-repeat;
	background-position 	: right 15px center;
}

/*** fancy input field stuff ***/

#coupon-form .form-field {
	position: relative;
	padding: 0px;
	margin: 30px 0 0 0;
}

.cq-input {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 67px;
/*	z-index: 1;
*/
	padding: 40px 0 15px 15px;

	font-size: 20px;
	font-weight: 400;
	font-smoothing: antialiased;
	line-height: 1;
	color: var(--cq-black);

	border-width: 0;

	transition: background-color .25s, border-color .25s ease-in-out;

	background-color: rgba(255,255,255,0);
	border-bottom: 1px solid var(--cq-gray);
}

.cq-input:focus {
	outline: 0;
	box-shadow: 0;
	font-weight: 500;

	background-color: rgba(255,255,255,1);
	border-bottom: 2px solid var(--cq-link);
}

.cq-input:not(:focus):not(:placeholder-shown) {
/*	border-bottom: 1px solid var(--cq-gray);
*/}
.cq-input:valid:not(:placeholder-shown) {
/*	border-color: var(--cq-gray);
*/}
.cq-input.inputerror {
	border-color: var(--cq-status-worse);
}

.cq-input::placeholder {
	color: transparent;
}

@keyframes success {
    0%   { border-bottom: 2px solid var(--cq-status-good) }
    100% { border-bottom: 1px solid var(--cq-gray) }
}

.cq-input.applied {
	background-image 		: url("data:image/svg+xml,<svg width='20' height='16' viewBox='0 0 20 16' xmlns='http://www.w3.org/2000/svg'><g stroke='%231F252D' stroke-width='1' fill='none'><polyline points='1 6 6 11 16 1'></polyline></g></svg>");
	background-repeat 		: no-repeat;
	background-position 	: right 15px top 40px;

    animation-name: success;
    animation-duration: 3s;
}
/*
.cq-input:optional::before {
	content: "optional";
	position: absolute;
	right: 0;

	font-size: 12px;
	font-weight: 400;

	transition: color 0.25s ease-in-out;
	color: var(--cq-dark-gray);

	background-color: #f00;
}

.cq-input:optional:focus::before {
	color: transparent;
}
*/
.cq-input-label {
	position: absolute;
	top: 42px;
	left: 15px;
	display: block;

	user-select: none;
/*	z-index: 0;
*/
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;

	transition: transform .25s, color .25s ease-in-out;
	transform-origin: 0 0;
	color: var(--cq-dark-gray);
}

.cq-input:focus + .cq-input-label {
	color: var(--cq-black);
}


.cq-input:focus + .cq-input-label,
.cq-input:not(:placeholder-shown) + .cq-input-label {
	transform: translate(0, -27px);
/*	z-index: 2;
*/}

.cq-input-feedback {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 33px;
	padding: 9px 0 4px 15px;

	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5;

	transition: background-color .25s, color .25s ease-in-out;

	color: transparent;
	background-color: transparent;
}

.cq-input:focus ~ .cq-input-feedback {
	color: var(--cq-dark-gray);
	background-color: var(--cq-white);
}

.cq-input-feedback.inputerror {
 	color: var(--cq-status-worse) !important;
}

@keyframes shake {
    0%   { transform: translate(2px, 0); }
    10%  { transform: translate(-3px, 0); }
    20%  { transform: translate(4px, 0); }
    30%  { transform: translate(-5px, 0); }
    40%  { transform: translate(5px, 0); }
    50%  { transform: translate(-5px, 0); }
    60%  { transform: translate(4px, 0); }
    70%  { transform: translate(-3px, 0); }
    80%  { transform: translate(2px, 0); }
    90%  { transform: translate(-1px, 0); }
    100% { transform: translate(0px, 0); }
}
.shake {
    animation-name: shake;
    animation-duration: 1s;
/*    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: 1;
}
.shake {
    display:inline-block
*/}







/* page 3 */

.form-field {
	padding: 5px;
	margin: 0px;
}

.form-field.active {
	background-color: var(--cq-white);
}

.field-header {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--cq-black);
	text-transform: uppercase;
	padding: 10px 0 0 10px;
}


#card-element {
	border-bottom: 2px solid var(--cq-link);
	padding: 10px 0 10px 10px;
	margin: 0;
}

#card-errors {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--cq-status-worse);
	padding: 10px 0 3px 10px;
	height: 20px;
}

.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: var(--accent-color);
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: var(--accent-color);
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

.hidden {
	display: none;
}