html,
body {
	font-family: 'Open Sans', sans-serif;
	overscroll-behavior: none;
	background: #eee;
	/* width: 100vh;
	height: 100vh; */
}

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1 {
	font-size: 6em;
}

h2 {
	font-size: 5em;
}

h3 {
	font-size: 4em;
}

h4 {
	font-size: 3em;
}

h5 {
	font-size: 1.5em;
}

@-ms-viewport {
	width: device-width;
}

section {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	overflow-y: scroll;
}

.m-0 {
	margin: 0 !important;
}

.ml-auto {
	margin-left: auto !important;
}

.is-blue {
	background-color: #207ed6;
	color: #fff;
}

form {
	padding: 0 2em;
}
.info-tab {
	display: none;
	border: 1px solid #ccc;
	padding: 10px;
	margin-top: 10px;
}

.info-tab.active {
	display: block;
}

.info-button {
	cursor: pointer;
	padding: 10px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 5px;
}

form label {
	color: #333;
	font-size: 1.2em;
}
/* .isPensioner form label{
	font-size: 1.4em;
} */

form label span {
	color: #e43d30;
}

form input {
	border-radius: 0;
}

form .select {
	width: 100%;
}

form .select select {
	width: 100%;
}

form .select:not(.is-multiple):not(.is-loading)::after {
	border-color: #ccc;
}

.button{
	border-radius: 0;
	font-size: 1.4em;
	border-color: transparent;
}

.checkBox {
	display: block;
	position: relative;
	width: 25px;
	height: 25px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkBox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 25px;
	width: 25px;
	left: 0;
	top: 0;
	z-index: 1;
}

.checkBox .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #fff;
}

.checkBox:hover input ~ .checkmark {
	background-color: #ccc;
}

.checkBox input:checked + .checkmark {
	background-color: #e43d30;
}

.checkBox .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkBox input:checked ~ .checkmark:after {
	display: block;
}

.checkBox .checkmark:after {
	left: 9px;
	top: 7px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.input.invalid,
select.invalid {
	border-color: #e43d30;
}

.checkBox input.invalid + .checkmark {
	border: 1px solid #e43d30;
}

/* ALERTIFY */
.alertify{
    color: #333;
}

.alertify .ajs-dialog {padding: 1em;box-shadow: 0 0 50px rgba(0,0,0,0.4);border-radius: 3px;overflow: hidden;}

.alertify .ajs-footer {
    margin: 0 -1em -1em;
}

.alertify .ajs-dimmer {
    opacity: 0.9;
    z-index: 10200;
    background-color: #000;
}

.alertify .ajs-modal {
    z-index: 10300;
}

.ajs-button {
    background: #f1f1f1;
    border: none;
    font-size: 0.9em;
    border-radius: 3px;
}

.ajs-message.ajs-error.ajs-visible{
	text-shadow: unset !important;
}

.ajs-button.ajs-ok {
    background: #c00;
    color: #fff;
}

.ajs-header, .ajs-commands {
    display: none;
}

.alertify .ajs-body .ajs-content {
    padding: 0px;
}

.alertify .ajs-body .ajs-content .ajs-input {
    background: #f1f1f1;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 5px 10px;
    width: 100%;
    text-align: center;
}

.alertify-notifier .ajs-message{width: 70vw;text-align: left;padding: 0.5em 1em !important;border-radius: 0em;font-size: 0.8em;bottom: 0.8em;box-shadow: 0 6px 20px rgba(0,0,0,0.3);}

.alertify-notifier .ajs-message {
    left: 0 !important;
    transform: translateX(0) !important;
    width: 100% !important;
    text-align: center;
    margin: 0 !important;
}

.alertify-notifier .ajs-message.ajs-error {
    background: #d7191f;
    color: #fff;
}

.alertify-notifier .ajs-message.ajs-success {}

.alertify-notifier {
    left: 0 !important;
    top: 0px !important;
}

.alertify-notifier.ajs-top {width: 100%;}


#welcomeScreen,
#businessThankYouSreen,
#homeThankYouSreen {
	background-color: #e43d30;
	color: #fff;
}

#welcomeScreen .container,
#businessThankYouSreen .container,
#homeThankYouSreen .container {
	height: 100%;
	padding: 2em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	max-width: 95%;
    width: 100%;
}

#welcomeScreen .container .textCopy,
#businessThankYouSreen .container .textCopy,
#homeThankYouSreen .container .textCopy {
	line-height: 1;
	margin-bottom: 2em;
	padding: 3em;
}

#welcomeScreen .container .textCopy h2,
#businessThankYouSreen .container .textCopy h2,
#homeThankYouSreen .container .textCopy h2 {
	font-weight: bold;
	line-height: 1.2;
}

/* #welcomeScreen .container .textCopy {
	margin-top: -10em;
} */

#welcomeScreen .container .textCopy .slidingtext {
	position: fixed;
	overflow: hidden;
	width: 80%;
}

#welcomeScreen .container .actions,
#businessThankYouSreen .container .actions,
#homeThankYouSreen .container .actions {
	position: relative;
	bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#welcomeScreen .container .actions button,
#businessThankYouSreen .container .actions button,
#homeThankYouSreen .container .actions button {
	background-color: #e43d30;
	color: #fff;
	border: 3px solid #fff;
	border-radius: 0;
	-webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
	box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
	padding-bottom: 1em;
	margin-left: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 1em;
	margin-bottom: 4em;
}

#welcomeScreen .container .actions button span,
#businessThankYouSreen .container .actions button span,
#homeThankYouSreen .container .actions button span {
	margin-left: .1em;
}

#welcomeScreen {
	margin: 0;
	/* height: 100%; */
	overflow: hidden;
}

#businessThankYouSreen .container {
	display: block;
}

#businessThankYouSreen .container p {
	margin-top: 2em;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.65);
}

#homeThankYouSreen {
	background-color: #207ed6;
	display: block;
	/* margin-top: 2em; */
}

#homeThankYouSreen .container {
	display: block;
}

#homeThankYouSreen .container p {
	margin-top: 2em;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.65);
}

#homeThankYouSreen p {
	margin-top: 2em;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.65);
}

#homeThankYouSreen {
	background-color: #207ed6;
}

#homeThankYouSreen .container {
	display: block;
}

#homeThankYouSreen .container p {
	margin-top: 2em;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.65);
}

.isPensioner #homeThankYouSreen {
	background-color: #f4b233;
}

#selectionScreen {
	background-color: #eee;
	position: relative;
}

#selectionScreen .container {
	width: 100%;
	height: 100%;
	padding: 0 2em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

#selectionScreen .container .textCopy {
	margin-top: auto;
	margin-bottom: 2em;
}

#selectionScreen .container .textCopy h5 {
	font-size: 1.5em;
}

#selectionScreen .container .textCopy h4 {
	font-size: 2em;
	font-weight: bold;
	color: #333;
}

#selectionScreen .container .columns {
	margin-bottom: 1em;
}

#selectionScreen .container .columns .column {
	/* margin-bottom: 3em; */
	/* font-size: .8em; */
}

#selectionScreen .container .choiceCard {
	display: block;
	margin-bottom: 2em;
}

#selectionScreen .container .choiceCard img {
	-webkit-box-shadow: 0 0.8em 1.5em rgba(0, 0, 0, 0.2);
	box-shadow: 0 0.8em 1.5em rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	width: 100% !important;
}

#selectionScreen .container ul li {
	font-size: .9em;
	margin-bottom: .5em;
	color: #333;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#selectionScreen .container ul li .icon {
	background-color: #fff;
	border-radius: 50%;
	margin-right: .5em;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 25px;
	flex: 0 0 25px;
}

#businessInfo,
#businessNote,
#businessContactInfo,
#businessAddress,
#businessLoyaltyCardNumber {
	background-color: #eee;
}

#businessInfo .container,
#businessNote .container,
#businessContactInfo .container,
#businessAddress .container,
#businessLoyaltyCardNumber .container {
	width: 100%;
	max-width: 100%;
	height: 100%;
	border-top: 8px solid #e43d30;
}

#businessInfo .container .header,
#businessNote .container .header,
#businessContactInfo .container .header,
#businessAddress .container .header,
#businessLoyaltyCardNumber .container .header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 1em;
}

#businessInfo .container .header h5,
#businessNote .container .header h5,
#businessContactInfo .container .header h5,
#businessAddress .container .header h5,
#businessLoyaltyCardNumber .container .header h5 {
	color: #e43d30;
	font-weight: bold;
	margin-left: auto;
	margin-right: 1em;
}

#businessInfo .container .header .closeButton,
#businessNote .container .header .closeButton,
#businessContactInfo .container .header .closeButton,
#businessAddress .container .header .closeButton,
#businessLoyaltyCardNumber .container .header .closeButton {
	color: #333;
	background-color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 40px;
	flex: 0 0 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#selectionScreen .closeButton {
	color: #333;
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    position: absolute;
    align-items: center;
    right: 1em;
    top: 1em;
}


#businessInfo .container .header .closeButton i,
#businessNote .container .header .closeButton i,
#businessContactInfo .container .header .closeButton i,
#businessAddress .container .header .closeButton i,
#businessLoyaltyCardNumber .container .header .closeButton i {
	font-size: 1.5em;
}

#businessInfo .container .typeOfBussiness > label,
#businessNote .container .typeOfBussiness > label,
#businessContactInfo .container .typeOfBussiness > label,
#businessAddress .container .typeOfBussiness > label,
#businessLoyaltyCardNumber .container .typeOfBussiness > label {
	margin-bottom: 4px;
}

#businessInfo .container form h5,
#businessContactInfo .container form h5,
#businessAddress .container form h5,
#businessLoyaltyCardNumber .container form h5 {
	margin-bottom: .5em;
}

#businessNote .businessNoteWrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70vh;
}

#businessNote .businessNoteWrapper .note{
	margin-left: 0;
}
#businessNote .businessNoteWrapper p{
	font-size: 1.5em;
}

#businessInfo .container .typeOfBussiness label,
#businessContactInfo .container .typeOfBussiness label,
#businessAddress .container .typeOfBussiness label,
#businessLoyaltyCardNumber .container .typeOfBussiness label {
	display: block;
}

#businessInfo .container .actions,
#businessNote .container .actions,
#businessContactInfo .container .actions,
#businessAddress .container .actions,
#businessLoyaltyCardNumber .container .actions {
	position: absolute;
	bottom: 0;
	padding: 1em;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#businessInfo .container .actions :first-child,
#businessNote .container .actions :first-child,
#businessContactInfo .container .actions :first-child,
#businessAddress .container .actions :first-child,
#businessLoyaltyCardNumber .container .actions :first-child {
	margin-left: auto;
}

#businessInfo .container .actions .is-danger,
#businessNote .container .actions .is-danger,
#businessContactInfo .container .actions .is-danger,
#businessAddress .container .actions .is-danger,
#businessLoyaltyCardNumber .container .actions .is-danger {
	background-color: #e43d30;
	margin-left: .5em;
	padding: 0 2em;
}

#businessInfo .container .question,
#businessNote .container .question,
#businessContactInfo .container .question,
#businessAddress .container .question,
#businessLoyaltyCardNumber .container .question {
	line-height: 1;
	margin-top: .5em;
}

#businessInfo .container .question p,
#businessNote .container .question p,
#businessContactInfo .container .question p,
#businessAddress .container .question p,
#businessLoyaltyCardNumber .container .question p {
	font-weight: bold;
}

#businessInfo .container .question small,
#businessNote .container .question small,
#businessContactInfo .container .question small,
#businessAddress .container .question small,
#businessLoyaltyCardNumber .container .question small {
	font-size: .7em;
	font-style: italic;
}

#businessInfo .container .yesNoBox,
#businessContactInfo .container .yesNoBox,
#businessAddress .container .yesNoBox,
#businessLoyaltyCardNumber .container .yesNoBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#businessInfo .container .yesNoBox > div,
#businessContactInfo .container .yesNoBox > div,
#businessAddress .container .yesNoBox > div,
#businessLoyaltyCardNumber .container .yesNoBox > div {
	padding: .5em 2em;
	background-color: #fff;
	font-weight: bold;
}

#businessInfo .container .yesNoBox > div:hover,
#businessContactInfo .container .yesNoBox > div:hover,
#businessAddress .container .yesNoBox > div:hover,
#businessLoyaltyCardNumber .container .yesNoBox > div:hover {
	cursor: pointer;
	background-color: rgba(255, 0, 0, 0.2);
}

#businessInfo .container .yesNoBox > div.isSelected,
#businessContactInfo .container .yesNoBox > div.isSelected,
#businessAddress .container .yesNoBox > div.isSelected,
#businessLoyaltyCardNumber .container .yesNoBox > div.isSelected {
	background-color: #e43d30;
	color: #fff;
}

#businessInfo .container .termsAndConditions,
#businessContactInfo .container .termsAndConditions,
#businessAddress .container .termsAndConditions,
#businessLoyaltyCardNumber .container .termsAndConditions {
	margin-top: 2em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#businessInfo .container .termsAndConditions a,
#businessContactInfo .container .termsAndConditions a,
#businessAddress .container .termsAndConditions a,
#businessLoyaltyCardNumber .container .termsAndConditions a {
	color: inherit;
	text-decoration: underline;
}

#businessInfo .container .termsAndConditions a:visited,
#businessContactInfo .container .termsAndConditions a:visited,
#businessAddress .container .termsAndConditions a:visited,
#businessLoyaltyCardNumber .container .termsAndConditions a:visited {
	color: inherit;
}

#businessInfo .container .termsAndConditions p,
#businessContactInfo .container .termsAndConditions p,
#businessAddress .container .termsAndConditions p,
#businessLoyaltyCardNumber .container .termsAndConditions p {
	margin-left: .5em;
}

#homeInfo,
#homeAddress,
#homeLoyaltyCardNumber {
	background-color: #eee;
}

#homeInfo .container,
#homeAddress .container,
#homeLoyaltyCardNumber .container {
	width: 100%;
	height: 100%;
	max-width: 100%;
	border-top: 8px solid #207ed6;
}

#homeInfo .container .header,
#homeAddress .container .header,
#homeLoyaltyCardNumber .container .header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 1em;
}

#homeInfo .container .header h5,
#homeAddress .container .header h5,
#homeLoyaltyCardNumber .container .header h5 {
	color: #207ed6;
	font-weight: bold;
	margin-left: auto;
	margin-right: 1em;
}

#homeInfo .container .header .closeButton,
#homeAddress .container .header .closeButton,
#homeLoyaltyCardNumber .container .header .closeButton {
	color: #333;
	background-color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 40px;
	flex: 0 0 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#homeInfo .container .header .closeButton i,
#homeAddress .container .header .closeButton i,
#homeLoyaltyCardNumber .container .header .closeButton i {
	font-size: 1.5em;
}

#homeInfo .container .typeOfBussiness > label,
#homeAddress .container .typeOfBussiness > label,
#homeLoyaltyCardNumber .container .typeOfBussiness > label {
	margin-bottom: 4px;
}

#homeInfo .container form h5,
#homeAddress .container form h5,
#homeLoyaltyCardNumber .container form h5 {
	margin-bottom: .5em;
}

#homeInfo .container .typeOfBussiness label,
#homeAddress .container .typeOfBussiness label,
#homeLoyaltyCardNumber .container .typeOfBussiness label {
	display: block;
}

#homeInfo .container .buttons.has-addons .button,
#homeAddress .container .buttons.has-addons .button,
#homeLoyaltyCardNumber .container .buttons.has-addons .button {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

#homeInfo .container .actions,
#homeAddress .container .actions,
#homeLoyaltyCardNumber .container .actions {
	position: absolute;
	bottom: 0;
	padding: 1em;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#homeInfo .container .actions :first-child,
#homeAddress .container .actions :first-child,
#homeLoyaltyCardNumber .container .actions :first-child {
	margin-left: auto;
}

#homeInfo .container .actions .is-blue,
#homeAddress .container .actions .is-blue,
#homeLoyaltyCardNumber .container .actions .is-blue {
	margin-left: .5em;
	padding: 0 2em;
}

#homeInfo .container .question,
#homeAddress .container .question,
#homeLoyaltyCardNumber .container .question {
	line-height: 1;
	margin-top: .5em;
}

#homeInfo .container .question p,
#homeAddress .container .question p,
#homeLoyaltyCardNumber .container .question p {
	font-weight: bold;
}

#homeInfo .container .question small,
#homeAddress .container .question small,
#homeLoyaltyCardNumber .container .question small {
	font-size: .7em;
	font-style: italic;
}

#homeInfo .container .checkBox input:checked + .checkmark,
#homeAddress .container .checkBox input:checked + .checkmark,
#homeLoyaltyCardNumber .container .checkBox input:checked + .checkmark {
	background-color: #207ed6;
}

#homeInfo .container .yesNoBox,
#homeAddress .container .yesNoBox,
#homeLoyaltyCardNumber .container .yesNoBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#homeInfo .container .yesNoBox > div,
#homeAddress .container .yesNoBox > div,
#homeLoyaltyCardNumber .container .yesNoBox > div {
	padding: .5em 2em;
	background-color: #fff;
	font-weight: bold;
}

#homeInfo .container .yesNoBox > div:hover,
#homeAddress .container .yesNoBox > div:hover,
#homeLoyaltyCardNumber .container .yesNoBox > div:hover {
	cursor: pointer;
	background-color: rgba(32, 126, 214, 0.2);
}

#homeInfo .container .yesNoBox > div.isSelected,
#homeAddress .container .yesNoBox > div.isSelected,
#homeLoyaltyCardNumber .container .yesNoBox > div.isSelected {
	background-color: #207ed6;
	color: #fff;
}

#homeInfo .container .termsAndConditions,
#homeAddress .container .termsAndConditions,
#homeLoyaltyCardNumber .container .termsAndConditions {
	margin-top: 2em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#homeInfo .container .termsAndConditions a,
#homeAddress .container .termsAndConditions a,
#homeLoyaltyCardNumber .container .termsAndConditions a {
	color: inherit;
	text-decoration: underline;
}

#homeInfo .container .termsAndConditions a:visited,
#homeAddress .container .termsAndConditions a:visited,
#homeLoyaltyCardNumber .container .termsAndConditions a:visited {
	color: inherit;
}

#homeInfo .container .termsAndConditions p,
#homeAddress .container .termsAndConditions p,
#homeLoyaltyCardNumber .container .termsAndConditions p {
	margin-left: .5em;
}

.isPensioner #homeInfo .is-blue,
.isPensioner #homeAddress .is-blue,
.isPensioner #homeLoyaltyCardNumber .is-blue {
	background-color: #f4b233;
	color: #fff;
}

.isPensioner #homeInfo .container,
.isPensioner #homeAddress .container,
.isPensioner #homeLoyaltyCardNumber .container {
	border-top: 8px solid #f4b233;
}

.isPensioner #homeInfo .container .header h5,
.isPensioner #homeAddress .container .header h5,
.isPensioner #homeLoyaltyCardNumber .container .header h5 {
	color: #f4b233;
}

.isPensioner #homeInfo .container .checkBox input:checked + .checkmark,
.isPensioner #homeAddress .container .checkBox input:checked + .checkmark,
.isPensioner #homeLoyaltyCardNumber .container .checkBox input:checked + .checkmark {
	background-color: #f4b233;
}

.isPensioner #homeInfo .container .yesNoBox > div:hover,
.isPensioner #homeAddress .container .yesNoBox > div:hover,
.isPensioner #homeLoyaltyCardNumber .container .yesNoBox > div:hover {
	background-color: rgba(244, 176, 51, 0.2);
}

.isPensioner #homeInfo .container .yesNoBox > div.isSelected,
.isPensioner #homeAddress .container .yesNoBox > div.isSelected,
.isPensioner #homeLoyaltyCardNumber .container .yesNoBox > div.isSelected {
	background-color: #f4b233;
}

#stillTherePopUp,
#termsAndConditionsPopUp,
#cancelSignUp {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 100vh;
}

.stillThere {
	position: fixed;
}

.stillThere #stillTherePopUp {
	display: block;
	visibility: visible;
	opacity: 1;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 10;
}


.stillThere #stillTherePopUp .stillThereCard h5 {
	font-weight: bold;
	color: #333;
	margin-bottom: .5em;
}

.stillThere #stillTherePopUp .stillThereCard p {
	font-size: 1.3em;
	margin-bottom: .5em;
	color: #aaa;
	font-weight: bold;
}

.stillThere #stillTherePopUp .stillThereCard .actions {
	padding: 1em;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	margin-top: 2em;
}

.stillThere #stillTherePopUp .stillThereCard .actions :first-child {
	padding: 0 2em;
}

.stillThere #stillTherePopUp .stillThereCard .actions .is-danger {
	background-color: #e43d30;
	padding: 0 2em;
}

.stillThere .isPensioner #stillTherePopUp .stillThereCard .actions .is-danger{
	background: #f4b233;

}

.stillThere .isPersonal #stillTherePopUp .stillThereCard .actions .is-danger{
	background: #207ed6;
}

.cancel {
	/* pointer-events: none; */
	position: fixed;
}

.cancel #cancelSignUp {
	display: block;
	visibility: visible;
	opacity: 1;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 10;
}

.cardPopUp .cardBody {
	background-color: #dddddd;
	padding: 2em;
	width: 100%;
}

.cancel #cancelSignUp .cancelCard h5 {
	font-weight: bold;
	color: #333;
	margin-bottom: .5em;
}

.cancel #cancelSignUp .cancelCard p {
	font-size: 1.3em;
	margin-bottom: .5em;
	color: #aaa;
	font-weight: bold;
}

.cancel #cancelSignUp .cancelCard .note {
	font-size: .8em;
	font-style: italic;
}

.cardBody .actions {
	padding: 1em;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	margin-top: 2em;
}

.cancel #cancelSignUp .cancelCard .actions :first-child,
.cancel #cancelSignUp .cancelCard .actions .is-blue {
	padding: 0 2em;
}
.cancel .isPensioner #cancelSignUp .cancelCard .is-blue{
	background: #f4b233;
}

.cancel .isBusiness #cancelSignUp .cancelCard .is-blue{
	background-color: #e43d30;
}

.is-blue:hover{
	color: #fff;
	filter: contrast(1.2);
}

.showTermsAndConditions #termsAndConditionsPopUp {
	display: block;
	visibility: visible;
	opacity: 1;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #dddddd;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 10;
}

.showTermsAndConditions #termsAndConditionsPopUp .tandcContainer {
	padding: 1em;
}

.showTermsAndConditions #termsAndConditionsPopUp .tandcContainer .header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.showTermsAndConditions #termsAndConditionsPopUp .tandcContainer .header i {
	color: #333;
	font-size: 2em;
}

.showTermsAndConditions #termsAndConditionsPopUp .tandcContainer .textCopy {
	margin: 1em;
	width: 70%;
	margin-left: auto;
    margin-right: auto;
}

.showTermsAndConditions #termsAndConditionsPopUp .tandcContainer .textCopy h5 {
	font-weight: bold;
	margin-bottom: .5em;
}

.showTermsAndConditions #termsAndConditionsPopUp .tandcContainer .textCopy p {
	margin-bottom: .25em;
}

.isPensioner.cancel .button.is-blue {
	background-color: #f4b233;
}

.isBusiness.cancel .button.is-blue {
	background-color: #e43d30;
}

#homeInfo .titleContainer,
#homeAddress .titleContainer,
#businessAddress .titleContainer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#homeInfo .titleContainer.yesNo,
#homeAddress .titleContainer.yesNo,
#businessAddress .titleContainer.yesNo {
	justify-content: center;
}

#homeInfo .titleContainer input,
#homeAddress .titleContainer input,
#businessAddress .titleContainer input {
	display: none;
}

#homeInfo .titleContainer input + label,
#homeAddress .titleContainer input + label,
#businessAddress .titleContainer input + label {
	display: block;
	width: 6em;
	padding: .4em 1.5em;
	text-align: center;
	font-size: 1em;
	background: #fff;
	color: #aaa;
	white-space: nowrap;
	width: fit-content;
	cursor: pointer;
}



#homeInfo .titleContainer.identification label{
	    max-width: 50%;
}

#homeInfo .titleContainer.identification input + label,
#homeAddress .titleContainer.identification input + label,
#businessAddress .titleContainer.identification input + label {
	flex: 0 0 50%;
}

#homeInfo .titleContainer.yesNo input + label,
#homeAddress .titleContainer.yesNo input + label,
#businessAddress .titleContainer.yesNo input + label {
	color: #333;
	font-weight: bold;
	padding: .5em 2em;
	width: auto;
}

.isPensioner #homeInfo .titleContainer input:checked + label,
.isPensioner #homeAddress .titleContainer input:checked + label,
.isPensioner #businessAddress .titleContainer input:checked + label {
	background: #f4b233;
	color: #fff;
}

.isPersonal #homeInfo .titleContainer input:checked + label,
.isPersonal #homeAddress .titleContainer input:checked + label,
.isPersonal #businessAddress .titleContainer input:checked + label {
	background: #207ed6;
	color: #fff;
}

.isBusiness #homeInfo .titleContainer input:checked + label,
.isBusiness #homeAddress .titleContainer input:checked + label,
.isBusiness #businessAddress .titleContainer input:checked + label,
#businessAddress .titleContainer input:checked + label,
.isBusiness #businessAddress + label.checked {
	background: #e43d30 !important;
	color: #fff;
}


#welcomeScreen .slideContainer {
	display: flex;
}
#welcomeScreen .slideTransision {
	display: flex;
	align-items: baseline;
	overflow: hidden;
	padding: 1em;
	padding-left: 0;
	width: 100%;
}
#welcomeScreen .frame {
	flex: 0 0 100%;
	display: flex;

	align-items: center;

	transition: transform 0.3s ease-in-out;
}
#welcomeScreen .frame:first-of-type {
	opacity: 1;
}
#welcomeScreen .frame:last-of-type {
	opacity: 0;
}




.ifApplic {
	font-weight: unset;
	font-size: 0.7em;
	font-style: italic;
}

.errorContainer{
	color: #d7191f;
}






@media screen and (max-width: 1280px) and (max-height: 799px){
	#app{
		height: 100vh;
	}
	#homeInfo .container, #homeAddress .container, #homeLoyaltyCardNumber .container {
		max-width: 100%;
	}

	section{
		height: 100%;
	}
	#welcomeScreen .container .textCopy h4{
		font-size: 2.9em;
	}
	#welcomeScreen .container .textCopy h2, #businessThankYouSreen .container .textCopy h2, #homeThankYouSreen .container .textCopy h2{
		font-size: 4em;
	}

}


@media screen and (min-width: 1280px){
	#selectionScreen .container{
		justify-content: center;
	}

	#selectionScreen .container .textCopy{
		margin-top: 0;
	}
}

@media screen and (min-width: 768px) {
	*{}

.isBusiness form label {
	/* white-space: nowrap; */
}
}
@media screen and (max-width: 768.92px) {
	*{}
	.cardPopUp{

	}

	.cardPopUp .cardBody{
		width: 80%;
	}
	.choiceItem .choiceItemTitle{
		position: relative;
	}
	#selectionScreen .choiceCard img{
		max-width: 70%;
	}

	.choiceItemTitle i{
		position: absolute;
		font-size: 1.3em;
	    right: 0px;
	    top: 25%;
		transform: rotate(180deg);
	    transition: transform .5s;

	}

	.choiceItem.collapse .choiceItemTitle i{
		transform: rotate(0deg);
	}
	.choiceItem .choiceItemBody{
		overflow: hidden;
		height: auto;
		-webkit-transition: height 200ms; 
		-moz-transition: height 200ms; 
		-ms-transition: height 200ms; 
		-o-transition: height 200ms; 
		transition: height 200ms;
	}

	.choiceItem.collapse .choiceItemBody{
		height: 0;
	}
	.choiceItemBody ul{
		padding-top: 10px;
	}


	#selectionScreen .closeButton{
		width: 25px;
		height: 25px;
		top: 0px;

	}
	#welcomeScreen .container .actions button {
		background-color: #e43d30;
		color: #fff;
		border: 3px solid #fff;
		border-radius: 0;
		-webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
		box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
		padding-bottom: 1em;
		margin-left: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 0 1em;
		margin-bottom: 4em;
		top: -2em;
}
@media screen and (max-width: 600px) {
	html,
	body {
		font-size: 15px !important;
	}

	#homeThankYouSreen .container,
	#businessThankYouSreen .container {
		margin-top: 0;
	}

	#welcomeScreen .container .logo img {
		max-width: 43%;
	}

	#welcomeScreen .container .textCopy {
		padding: 0;
	}


	#welcomeScreen .container h4 {
		font-size: 2em;
	}

	#welcomeScreen .container h2 {
		font-size: 2.8em;
		/* padding-top: .5em; */
	}
	#selectionScreen .container .textCopy{
		margin-bottom: 10px;	
	}
	#selectionScreen {
		height: auto;
	}

	#selectionScreen .container {
		margin-top: 2em;
		height: 100%;
	}

	#selectionScreen .container ul li {
		color: #4a4a4a;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
	}
	#selectionScreen .container ul li .icon{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 20px;
		flex:0 0 20px;
		height: 20px;
		width: 20px;
	}
	.cardPopUp .cardBody{
		width: 80%;
	}
}


@media screen and (max-width: 575.98px) {
	*{}
	#homeThankYouSreen .container{
		display: flex;
		justify-content: center;
	}
	#welcomeScreen .container .textCopy, 
	#businessThankYouSreen .container .textCopy, 
	#homeThankYouSreen .container .textCopy{
		padding: 0px;
	}

	
	#welcomeScreen .container .textCopy h4, 
	#businessThankYouSreen .container .textCopy h4, 
	#homeThankYouSreen .container .textCopy h4{
		font-size: 2em;
	}

	#welcomeScreen .container .textCopy h2, 
	#businessThankYouSreen .container .textCopy h2, 
	#homeThankYouSreen .container .textCopy h2{
		font-size: 3em;
	}

	.cardPopUp .cardBody{
		padding: 1.3em;
		width: 100%;
	}
.cardBody .actions{
	padding: 0px;
}

.cardBody .actions .button{
	    width: 48%;
    font-size: .9em;
}


	#selectionScreen .closeButton i{
		font-size: .9em;
	}
	#selectionScreen .container .textCopy h4{
		font-size: 1em;
	}
	#selectionScreen .container .choiceCard{
		margin-bottom: 1em;
	}
	.isBusiness form{
		margin-bottom: 21%;
	}
	.isPensioner,.isBusiness, .isPersonal{
		/* margin-bottom: 100px; */
	}
	.streetAddress input{
		font-size: 0.9em;
		min-height: 38px;
	}
}


p.is-hidden-tablet.showLess.button.is-small {
    width: 70px;
}

p.is-hidden-tablet.showMore.button.is-small {
    width: 80px;
}

@media screen and (max-height: 450px){
	.keyboardCloseButton{

	}
}



@media screen and (max-height: 450px){
	.keyboardCloseButton{
		display: block;
		position: fixed;
		bottom: 0;
		width: 110px;
		height: 56px;
		left: 0;
		background: #fff;
		padding: .5em;
		box-shadow: 0.3em 1em 1em rgba(0,0,0,0.2);
	}
	

	.keyboardCloseButton svg{
		fill: #333;
	}

	.keyboardCloseButton span{
		display: block;
		height: 100%;
		font-size: .8em;
		text-align: center;
	}
	/* #businessInfo .container .header, #businessContactInfo .container .header, #businessAddress .container .header, #businessLoyaltyCardNumber .container .header{
		display: none;
	} */

	#homeInfo .container .header .closeButton, #homeAddress .container .header .closeButton, #homeLoyaltyCardNumber .container .header .closeButton{
		position: absolute;
		right: 20px;
		top: 20px;
	}

	#homeInfo .container, 
	#homeAddress .container, 
	#homeLoyaltyCardNumber .container{
		padding-top: 2em;
	}

	#homeInfo .container form h5, 
	#homeAddress .container form h5, 
	#homeLoyaltyCardNumber .container form h5{
		display: none;
	}
	#businessInfo .container form h5, #businessContactInfo .container form h5, #businessAddress .container form h5, #businessLoyaltyCardNumber .container form h5{
		display: none;
	}

	#homeInfo .container .actions, #homeAddress .container .actions, #homeLoyaltyCardNumber .container .actions{
		padding: 0;
		padding-right: 2em;
		top: 286px;
	}

	#businessInfo .container .actions, #businessContactInfo .container .actions, #businessAddress .container .actions, #businessLoyaltyCardNumber .container .actions{
		padding: 0;
		padding-right: 2em;
		top: 286px;
	}

	#homeInfo .container .header, #homeAddress .container .header, #homeLoyaltyCardNumber .container .header{
		position: fixed;
		right: 0;
		top: 0;
		
	}

	#homeInfo .container .header h5, #homeAddress .container .header h5, #homeLoyaltyCardNumber .container .header h5{
		display: none !important;
	}
	.container{
		border-top: none;
	}

	#businessInfo .container .header h5, #businessContactInfo .container .header h5, #businessAddress .container .header h5, #businessLoyaltyCardNumber .container .header h5{
		display: none;
	}

	#businessInfo .container .header .closeButton, #businessContactInfo .container .header .closeButton, #businessAddress .container .header .closeButton, #businessLoyaltyCardNumber .container .header .closeButton{
		position: absolute;
		right: 20px;
		top: 20px;
	}

	#businessInfo .container {
		margin-bottom: 10.7em !important;
	}

	#homeInfo .container, #homeAddress .container{
		margin-bottom: 5em !important;
	}

}

@media screen and (max-width: 509.98px){
	*{}
	#businessInfo .container .b2bNotes, #homeInfo .infoForm{
		margin-bottom: 15%;
	}
	#businessInfo .container .actions, #businessContactInfo .container .actions, #businessAddress .container .actions, #businessLoyaltyCardNumber .container .actions,
	#homeInfo .container .actions, #homeAddress .container .actions, #homeLoyaltyCardNumber .container .actions{
		position: fixed;
		background-color: #eee;
	}
	#welcomeScreen .container .textCopy h2{
		font-size: 3em;
	}
	#selectionScreen .container .textCopy h4{
		font-size: .9em;
	}
}

@media screen and (max-width: 320.98px) {
	*{}
	.cardPopUp .cardBody{
		width: 98%;
	}

	#welcomeScreen .container .textCopy h4, 
	#businessThankYouSreen .container .textCopy h4, 
	#homeThankYouSreen .container .textCopy h4{
		font-size: 1.5em;
	}

	#welcomeScreen .container .textCopy h2, 
	#businessThankYouSreen .container .textCopy h2, 
	#homeThankYouSreen .container .textCopy h2{
		font-size: 2.8em;
	}

}


/*# sourceMappingURL=style.css.map */
.slide-enter-active,
.slide-leave-active {
	transition-duration: .5s;
	transition-property: all;
	transition-timing-function: ease;
	transform: translateX(0%);
	opacity: 1;
	pointer-events: none;
}

.transitionBack .slide-enter-active,
.transitionBack .slide-leave-active  {
	transition-duration: .5s;
	transition-property: all;
	transition-timing-function: ease;
	transform: translateX(0%);
	opacity: 1;
}

.slide-leave-active {
	transform: translateX(-50%);
	opacity: 0;
}

.transitionBack .slide-leave-active {
	transform:translateX(50%);
	opacity: 0;
}

.transitionBack .slide-enter-active{
	transform: translateX(0);
	opacity: 1;
} 

.slide-leave{
	opacity: 0;
	
}

.slide-enter {
	opacity: 0;
	transform: translateX(50%);
}

.transitionBack .slide-enter{
	opacity: 0;
	transform: translateX(-50%);
}



.note{
	margin-top: 2.5em;
	margin-left:1em;
}
@media screen and (min-width:575.98px){
	.animateCards .choiceCard.bussiness{
		animation: bounce 1s ease .3s 1;
	}

	.animateCards .choiceCard.personal{
		animation: bounce 1s ease .9s 1;
	}

	.animateCards .choiceCard.pensioner{
		animation: bounce 1s ease 1.5s 1;
	}
}
.input,
.autocomplete__inputs input{
	font-size: 1.5em;
    padding: 0;
    /*line-height: 0;*/
    font-family: inherit;
    height: 1.7em;
    vertical-align: middle;
    display: inline-block;
    padding-bottom: .1em;
    padding-left: .3em;
}

.autocomplete__box > img{
	display: none;
}

.autocomplete__icon.autocomplete--clear{
	margin-top: -.5em;
}

.select select{
	font-size: 1.5em;
    line-height: 1.2;
    padding: 0;
    padding-left: .3em;
	height: 1.7em;
	font-family: inherit;
}
.invalidField .autocomplete__box{
	border: 1px solid #e43d30;
}


.navbar-link:not(.is-arrowless)::after, .select:not(.is-multiple):not(.is-loading)::after{
	top: 60%;
}

.litsNames{
	background-color: #fff;
	border-radius: 4px;
}

.litsNames a{
	padding: .5em .5em;
	border-bottom: 1px solid #ccc;
	color: #333;
}

.cardPopUp .cardBody{
	
}
.choiceItemTitle .showMore,
.collapse .choiceItemTitle .showLess{
	display: none;
}
.collapse .choiceItemTitle .showMore,
.choiceItemTitle .showLess{
	display: block;
}
.showLess{
	margin-bottom: 10px;
}


@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px) }
    60% {-webkit-transform: translateY(-20px);}
} 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-20px);}
}
}

.keyboardCloseButton{
	display: none;
}

@media screen and (max-height: 450px){
	.keyboardCloseButton{
		display: block;
		position: fixed;
		bottom: 0;
		width: 110px;
		height: 56px;
		left: 0;
		background: #fff;
		padding: .5em;
		box-shadow: 0.3em 1em 1em rgba(0,0,0,0.2);
	}
	

	.keyboardCloseButton svg{
		fill: #333;
	}

	.keyboardCloseButton span{
		display: block;
		height: 100%;
		font-size: .8em;
		text-align: center;
	}
}
/* hide shavesbucks from pensioners */
.isPensioner .columns.penCol:nth-child(3) {
    display: none;
}

.isPensioner .control small {
    display: none;
}

.isPensioner #birthDate + small,
.isPensioner #idNumber + small {
	display: block;
}

.isPersonal .button[disabled]{
	 background-color: #207ed6;
}

.button[disabled],
fieldset[disabled] .button{
	    background-color: inherit;
	    border-color: inherit;
	    box-shadow: none;
	    opacity: .6;
}

@media (min-height: 700px) and (min-width: 1000px) {
    #selectionScreen .container .textCopy {
		margin-top: 6em;
		margin-bottom: 2em;
	}
}
.ajs-message.ajs-error {
	min-width: 350px;
    top: 10px;
}

@media (min-width: 950px) {
.welcomeRes {
	display: flex;
}
.autocomplete__box {
	min-height: 36px;
}
#homeInfo .container .typeOfBussiness > label, #homeAddress .container .typeOfBussiness > label, #homeLoyaltyCardNumber .container .typeOfBussiness > label {
    margin-bottom: 0px;
}
#businessInfo .container .typeOfBussiness > label, #businessNote .container .typeOfBussiness > label, #businessContactInfo .container .typeOfBussiness > label, #businessAddress .container .typeOfBussiness > label, #businessLoyaltyCardNumber .container .typeOfBussiness > label {
	margin-bottom: 0px;
}
	
}