html {
	font-size: 16px;
}

body {
	background-color: #28323B;
	font-family: Helvetica Neue, Arial, sans-serif;
	margin: 0;
}

.bodySplashClass {
	background: url('../../../../bundles/familyauth/images/signInBackground.jpg');
	background-size: cover;
	background-color: #28323B;
}

#wrapper {
	max-width: 416px;
	margin: 0 auto;
}

#splashWrapperIndexLoginId {
	max-width: 1248px;
	margin: 0 auto;
}

@media (max-width: 1248px) {
	#splashWrapperIndexLoginId {
		max-width: 1000px;
	}
}
@media (max-width: 1000px) {
	#splashWrapperIndexLoginId {
		max-width: 800px;
	}
}

.password_instruction {
	text-align: left;
	font-size: 0.75rem;
	line-height: 1.4;
	margin: -0.75rem auto;
}

#splashWrapperIndexLoginId a > img {
	margin: 4.5rem 0 0 0;
}

.splashWrapperIndexLogin #contentBlock > a {
	display: none;
}

.login-box {
	width: 33%;
	float: left;
	margin-top: 4.5rem;
	margin-bottom: 3rem;
}

#tab-2, #tab-1 {
	background: #FFF;
}

.splash {
	text-align: center;
}

.splash .smith-logo {
	margin: 2rem;
}

.info-side {
	width: 66%;
    float: left;
    box-sizing: border-box;
    padding: 0 3rem 0 3.75rem;
    text-align: left;
}

.info-side > div {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	clear: both;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-side > div h5 {
	color: #FFF;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	margin: 0 0 0.75rem 0;
	text-transform: uppercase;
}

.info-side > div span, .info-side > div span a {
	color: #FFF;
	font-weight: 100;
    letter-spacing: 0.05em;
}

.column-points {
	box-sizing: border-box;
	float: left;
	list-style: none;
	margin: 0;
	padding: 1.5rem 0 0 0;
	width: 50%;
}

.column-points:first-of-type {
	padding-right: 3rem;
}

.column-points li {
	padding-bottom: 1.5rem;
}

.column-points li div {
  	width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
}

.phone {
	background: url(../../../../bundles/familyauth/images/Phone.svg) no-repeat;
}
.diamond {
	background: url(../../../../bundles/familyauth/images/diamond.svg) no-repeat;
}
.gift {
	background: url(../../../../bundles/familyauth/images/Gift.svg) no-repeat;
}
.exclusives {
	background: url(../../../../bundles/familyauth/images/Exclusives.svg) no-repeat;
}
.circleTick {
	background: url(../../../../bundles/familyauth/images/CircleTick.svg) no-repeat;
}
.reviewer {
	background: url(../../../../bundles/familyauth/images/Reviewer.svg) no-repeat;
}

.column-points li h5 {
	color: #FFF;
	font-size: 0.75rem;
	font-weight: 400;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.column-points li p {
	color: #FFF;
	font-size: 1rem;
	line-height: 1.5rem;
	margin: 0.75rem 0;
	font-weight: 100;
    letter-spacing: 0.05em;
}

.logo-strapline {
	width: 66%;
    float: right;
    text-align: left;
    padding-left: 3rem;
    padding-right: 4rem;
    box-sizing: border-box;
}

.logo-strapline > p {
	color: #FFF;
	font-size: 1.5rem;
	font-weight: 100;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
    padding-bottom: 1.5rem;
}

/*.splashInner {
	background-color: #FFF;
}*/

@media (max-width: 1100px) {
	.column-points li {
		min-height: 10rem;
	}
	.info-side > div {
		padding-bottom: 1.5rem;
	}
}

@media (max-width: 800px) {
	#splashWrapperIndexLoginId {
		max-width: 650px;
	}
	
	.info-side {
		width: 50%;
		padding: 0 0 1.5rem 1.5rem;
	}

	.logo-strapline {
		width: 100%;
		padding-left: 0;
	}

	.login-box {
		width: 50%;
		padding-right: 1.5rem;
		box-sizing: border-box;
		margin-top: 3rem;
	}

	.column-points {
		padding: 0;
		width: 100%;
	}

	#splashWrapperIndexLoginId a > img {
		margin: 3rem 0 0 0;
	}

	.column-points:first-of-type {
		padding-right: 0;
		padding-top: 0.75rem;
		border-bottom: none;
		margin-bottom: 0;
	}

	.column-points li {
	    padding-bottom: 0.75rem;
	    min-height: auto;
	}

	.column-points li div {
	    margin-bottom: 0.75rem;
	}

	.forgotten-txt {
		float: none;
	}
}

@media (max-width: 570px) {
	#splashWrapperIndexLoginId {
		max-width: 300px;
	}

	.login-box {
		width: 100%;
		padding-right: 0;
		margin-top: 0.75rem;
		margin-bottom: 0;
	}

	.logo-strapline {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0.75rem;
	}

	.logo-strapline p {
		font-size: 1.25rem;
	}

	.info-side {
		width: 100%;
		padding: 0.75rem 0 1.5rem 0;
	}

	.info-side > div span {
		font-size: 0.875rem;
	}

	#splashWrapperIndexLoginId a > img {
		margin: 1.5rem 0 0 0;
	}

	.column-points li p {
		font-size: 0.875rem;
	}

	.exclusive-offers > p {
		padding-bottom: 1.5rem;
	}

}

.login-tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-size: 0;
	cursor: pointer;
}

.login-tabs li {
	display: inline-block;
	width: 50%;
	padding: 1rem 0;
	color: #999;
	font-size: 0.75rem;
	letter-spacing: 0.10rem;
}

.login-tabs li.active {
	background-color: #FFF;
	color: #666;
}

.separator {
	border-top: 1px solid #EDEDED;
	margin: 2.25rem 0 1.125rem;
}

	.separator span {
		display: inline;
		padding: 0 1rem;
		background-color: #FFF;
		color: #333;
		position: relative;
		top: -0.8rem;
	}

.FormRow, #SignupMemberType > div {
	margin-bottom: 1.5rem;
	font-size: 0;
	text-align: left;
}

.FormRow label, #SignupMemberType > div label {
	font-size: 0;
}

.FormRow button,
.FormRow select,
.FormRow input[type="text"],
.FormRow input[type="password"],
.FormRow input[type="email"],
#SignupMemberType > div button,
#SignupMemberType > div select,
#SignupMemberType > div input[type="text"],
#SignupMemberType > div input[type="password"],
#SignupMemberType > div input[type="email"] {
	font-size: 0.875rem;
	letter-spacing: 0.03rem;
	border: 1px solid #DCDCDC;
	width: 93%;
	padding: 1rem 0.75rem;
	border-radius: 0.25rem;
	    -moz-border-radius: 0.25rem;
	    -webkit-border-radius: 0.25rem;
}

.FormRow button,
.FormRow select,
#SignupMemberType > div button,
#SignupMemberType > div select {
	width: 100%;
	background-color: #fff;
}

.FormRow button,
#SignupMemberType > div button {
	border-radius: 0;
	color: #fff;
	background-color: #DCDCDC;
	text-transform: uppercase;
	font-size: 0.625rem;
	letter-spacing: 0.10rem;
}

select,
#SignupMemberType > div select {
	background-position: 20rem -3.6rem;
	height: 3.2rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.FormRow input[type="checkbox"],
#SignupMemberType > div input[type="checkbox"] {
	font-size: 1rem;
	width: 20px;
	height: 20px;
}

input, select,
#SignupMemberType > div input, #SignupMemberType > div select
  {
	background-image: url(../../../../bundles/familyauth/images/login-sprite.svg);
	background-repeat: no-repeat;
	background-size: 1.5rem 13.65rem;
}

	input[type="text"],
	#SignupMemberType > div input[type="text"] {
		background-position: 20rem -1.3rem;
	}

	input[type="password"],
	#SignupMemberType > div input[type="password"] {
		background-image: none;
	}

	input[placeholder="E-mail"],
	#SignupMemberType > div input[placeholder="E-mail"] {
		background-position: 20rem -8.1rem;
	}

.FormErrors ul, .formError ul {
	padding: 0;
	list-style: none;
	color: #750013;
}

.placeholder {
	color: #DCDCDC;
}

.fb-login-button-popup, .google-login-button {
	background-image: url(../../../../bundles/familyauth/images/login-sprite.svg);
	background-size: 1.5rem 13.65rem;
	background-repeat: no-repeat;
	display: block;
	font-size: 0.625rem;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	padding: 1rem 0.75rem;
	margin-bottom: 1.5rem;
	letter-spacing: 0.10rem;
}

.fb-login-button-popup {
	background-color: #3B5997;
	background-position: 4.2rem 0.9rem;
	cursor: pointer;
}

.google-login-button {
	background-color: #DD4B39;
	background-position: 4.7rem -11.5rem;
}

@media (max-width: 1000px) {
	input[type="text"],
	#SignupMemberType > div input[type="text"] {
		background-position: 14rem -1.3rem;
	}

	input[type="password"],
	#SignupMemberType > div input[type="password"] {
		background-position: 14rem -5.8rem;
	}

	select,
	#SignupMemberType > div select {
		background-position: 14rem -3.6rem;
	}

	input[placeholder="E-mail"],
	#SignupMemberType > div input[placeholder="E-mail"] {
		background-position: 14rem -8.1rem;
	}
}

@media (max-width: 1248px) {
	.fb-login-button-popup {
		background-position: 1.2rem 0.9rem;
	}
	.google-login-button {
		background-position: 1.7rem -11.5rem;
	}
}

.FormWrapper {
	padding: 1.50rem;
	display: none;
}

	.FormWrapper.active {
		display: inherit;
	}

.sign-up-optin {
	text-align: left;
}

.sign-up-optin label, #SignupMemberType > div label[for="SignupMemberType_optin"] {
	font-size: 0.875rem;
	vertical-align: middle;
	display: inline-block;
	width: 74%;
	padding-left: 6px;
}

#SignupMemberType_optin {
	float: left;
}

.FormRow .primary.button {
	background-color: #218656;
	cursor: pointer;
}

.forgotten-txt {
	display: inline-block;
	float: right;
}

.remember-me {
	display: inline-block;
	float: left;
}

.remember-me > .FormRow {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}

.remember-me label { 
	font-size: 0.875rem;
	vertical-align: middle;
}

#LoginType__remember_me {
	float: left;
}

.member-txt, .forgotten-txt {
	color: #750013;
	font-size: 0.875rem;
	text-decoration: none;
}

.exclusive-offers > p {
	color: #FFF;
	font-weight: 300;
	font-size: 1.5rem;
	padding-top: 1.5rem;
	margin-bottom: -1.5rem;
	text-align: left;
}

.password-field {
	position: relative;
}

.password-field input {
	/* css is doomed had to do it */
	background-image: none !important;
}

.password-icon {
	display: block;
	width: 2rem;
	height: 2rem;
	position: absolute;
	top: 0.6875rem;
	right: 0.6875rem;
	cursor: pointer;
	background-color: transparent;
	background-image: url(../../../../bundles/familyauth/images/hide_new.svg);
	background-repeat: no-repeat;
	background-size: 2rem 2rem;
}

.password-icon--show {
	background-image: url(../../../../bundles/familyauth/images/show_new.svg);
}