:root {
  --black: #363636;
  --marine-blue: #002c5b;
  --neon-red: #ed1c36;
  --white: #ffffff;
  --slate-grey-25: rgba(96, 98, 100, 0.25);
  --faded-blue-15: rgba(100, 144, 191, 0.15);
  --french-blue: #4577ac;
  --black-70: rgba(54, 54, 54, 0.7);
  --faded-blue-25: rgba(100, 144, 191, 0.25);
  --yellow-orange: #ffb700;
  --dusk-blue: #255c97;
  --dark-slate-blue: #173b62;
  --marine-blue-40: rgba(0, 44, 91, 0.4);
}

button {
	border: 0px !important;
}

.mg-40 {
	margin: 40px 0px;
}

.mb-20 {
	margin-bottom: 20px;
}

.medium-text {
	font-family: Arial;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
}

.med-small-text {
	font-family: Arial;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
}

.small-text {
	opacity: 0.65;
	font-family: Arial;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: var(--black);
}

.text-center {
	text-align: center;
}

.dark-hr {
	border-top: 2px solid black;
	margin: 35px 0px;
}

.membership-label {
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
	margin-bottom: 8px;
}

.modal-flash-error {
	color: red;
	font-size: 12px;
	margin: 20px 150px;
	text-align: center;
	display: none;
}

#membership-modal-container ::-webkit-input-placeholder { 
  color: var(--marine-blue-40);
}

#membership-modal-container :-ms-input-placeholder {
  color: var(--marine-blue-40);
}

#membership-modal-container ::placeholder {
  color: var(--marine-blue-40);
}

#membership-modal-container input {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

#membership-disabled-copy {
	font-size: 12px;
	color: red;
	margin-bottom: -10px;
}

#membership-disabled-container {
	min-height: 350px;
	color: red;
}


.w100 {
	width: 100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.input-with-accessory { position:relative; }

.closed-eye {
	display: none;
	height: 25px;
	width: 29px;
}

.open-eye {
	height: 25px;
	width: 29px;
}

#membership-modal-container {
	display: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--marine-blue);
	background-image: url("/images/bmx/site/membership/membership_bg.png");
	background-size: cover;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.close-main {
	padding-right: 20px;
}

.close-main:hover, .back-main:hover {
	cursor: pointer;
}

.back-main {
	visibility: hidden;
	padding-left: 20px;
}

.white-bg {
	background-image: none;
	background-color: white;
}


#top-logo {
	text-align: center;
	width: 69%;
	max-width:900px;
	height: auto;
	margin: 0 auto;
	margin-bottom: 40px;
	margin-top: 40px;
}

#logo-img {
	width:100%;
    height:auto;
}

#membership-modal {
	background-color: white;
	width: 74%;
	max-width:970px;
	margin: 0 auto;
	border-radius: 5px;
	/* min-height: 65%; [Tavo] - This is making some small rendering issues*/
}

#card-title {
	display: inline;
	font-size: 24px;
	font-family: industry, sans-serif;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: 0.1px;
}

#membership-header {
	width: 100%;
	background-image: url("/images/bmx/site/membership/CarbonFiberBackground.png");
	background-size: cover;
	text-align: center;
	height: 87px;
	line-height: 87px;
	vertical-align: middle;
	border-radius: 5px 5px 0px 0px;
	color: white;
	font-family: "Arial", sans-serif;
  	font-size: 24px;
  	font-weight: bold;
  	text-transform: uppercase;
}

.progress-bar-container {
	height: 22px;
	background-color: var(--slate-grey-25);
	text-align: left;
}

#full-progress-bar {
	background-color: var(--neon-red);
}

.progress-bar-red {
	position: relative;
	overflow: hidden;
	display: inline-block;
	height: 100%;
	z-index: 1;
}

.progress-bar-red:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--neon-red);
	-webkit-transform-origin: 100% 0;
	-ms-transform-origin: 100% 0;
	transform-origin: 100% 0;
	-webkit-transform: skew(-45deg);
	-ms-transform: skew(-45deg);
	transform: skew(-45deg);
	z-index: -1;
}

.progress-bar-steps {
	display: inline-block;
	padding-right: 14px;
	margin: 3px 3px;
	font-family: industry, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: var(--marine-blue);
	letter-spacing: 0.5px
}

.progress-bar-text {
	display: inline-block;
	float: right;
	padding-right: 23px;
	padding-top: 2px;
	font-family: industry, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: var(--white);
	letter-spacing: 0.5px
}

#confirm-age-progress-bar {
	display: none;
}

.membership-main-content {
	margin-bottom: 100px;
}

.membership-copy {
	font-size: 18px;
	font-family: "Arial", sans-serif;
	text-align: left;
	width: 60%;
	margin: 0 auto;
	margin-bottom: 30px;
	padding-top: 6%;
}

.membership-buttons {
	text-align: center;
	padding-bottom: 40px;
	padding-top: 1px;
}

.membership-buttons a:hover {
	text-decoration: none;
}

.membership-btn {
	text-decoration: none;
	display: block;
	width: 80%;
	max-width:352px;
	box-sizing:border-box;
	padding: 22px;
	color: var(--white);
	background-color: var(--marine-blue);
	font-family: industry, sans-serif;
	font-weight: bold;
	font-size: 18px;
	border-radius: 3px;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-bottom: 27px;
	margin-top: 27px;
}

.membership-btn:hover {
	background-color: var(--dusk-blue);
}

.membership-btn-inactive {
	background-color: var(--marine-blue-40);
}

#membership-signin,
#membership-forgot-password,
#membership-confirm-age,
#membership-email-sent,
#membership-create-account,
#membership-create-account-underage,
#membership-registration-email-sent,
#membership-new-membership,
#membership-under-18,
#membership-rider-info,
#membership-rider-info-self,
#membership-racing-info,
#membership-safety,
#membership-payment,
#membership-checkout,
#renewal-welcome,
#renewal-existing-memberships,
#renewal-search-memberships,
#membership-complete,
#renewal-safety,
#renewal-racing-info,
#membership-renewal-status,
#renewal-checkout,
#renewal-complete,
#renewal-payment,
.rider-info-flash,
#membership-upgrade-membership,
#upgrade-renewal-copy,
#membership-disabled {
	display: none;
}

form#membership-signin-form input[type="password"],
form#membership-signin-form input[type="email"],
form#membership-signin-form input[type="text"],
form#membership-forgot-password-form input[type="password"],
form#membership-forgot-password-form input[type="email"],
form#membership-forgot-password-form input[type="text"],
form#membership-confirm-age-form input[type="password"],
form#membership-confirm-age-form input[type="email"],
form#membership-confirm-age-form input[type="text"],
form#membership-confirm-age-form input[type="date"],
form#membership-create-account-form input[type="password"],
form#membership-create-account-form input[type="email"],
form#membership-create-account-form input[type="text"],
form#membership-create-account-underage-form input[type="password"],
form#membership-create-account-underage-form input[type="email"],
form#membership-create-account-underage-form input[type="text"],
form#membership-rider-info-form input[type="password"],
form#membership-rider-info-form input[type="email"],
form#membership-rider-info-form input[type="text"],
form#membership-rider-info-form input[type="tel"],
form#membership-rider-info-self-form input[type="password"],
form#membership-rider-info-self-form input[type="email"],
form#membership-rider-info-self-form input[type="text"],
form#membership-rider-info-self-form input[type="tel"],
form#membership-safety-form input[type="password"],
form#membership-safety-form input[type="email"],
form#membership-safety-form input[type="text"],
form#membership-safety-form input[type="tel"],
form#membership-payment-form input[type="password"],
form#membership-payment-form input[type="email"],
form#membership-payment-form input[type="text"],
form#membership-payment-form input[type="date"],
form#membership-payment-form input[type="tel"],
form#renewal-search-existing-form input[type="password"],
form#renewal-search-existing-form input[type="email"],
form#renewal-search-existing-form input[type="text"],
form#renewal-search-existing-form input[type="date"],
form#renewal-search-existing-form input[type="tel"],
form#renewal-safety-form input[type="password"],
form#renewal-safety-form input[type="email"],
form#renewal-safety-form input[type="text"],
form#renewal-safety-form input[type="tel"],
form#renewal-payment-form input[type="password"],
form#renewal-payment-form input[type="email"],
form#renewal-payment-form input[type="text"],
form#renewal-payment-form input[type="date"],
form#renewal-payment-form input[type="tel"],
form#renewal-racing-info-form input[type="password"],
form#renewal-racing-info-form input[type="email"],
form#renewal-racing-info-form input[type="text"],
form#renewal-racing-info-form input[type="date"],
form#renewal-racing-info-form input[type="tel"],
form#upgrade-membership-form input[type="text"],
#membership-promo-code,
#renewal-promo-code,
#presign-waiver-signature,
#outside-waiver-signature
{
	padding: 0px;
	height: 60px;
	border-radius: 4px;
	border: solid 2px var(--french-blue);
	background-color: var(--white);
	font-family: Arial;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--marine-blue);
	padding-left: 18px;
	box-shadow: none;

}

#outside-waiver-container {
	padding: 0px 37px;
	padding-bottom: 1px;
}

#inner-waiver-container {
	background-color: white;
	padding: 20px;
	margin-bottom: 37px;

}
.membership-form-item-signin {
	margin-bottom: 40px;
}

.membership-form-item {
	margin-bottom: 21px;
	min-height: 100px;
}

#membership-signin-form .membership-form-item, 
#membership-forgot-password-form .membership-form-item, 
#membership-confirm-age-form .membership-form-item {
	width: 80%;
	max-width:352px;
	margin: 15px auto;
	text-align: left;
}

#membership-signin-form label, #membership-forgot-password-form label, #membership-confirm-age-form label {
	text-align: left;
}

#membership-signin-email, 
#membership-signin-password, 
#membership-forgot-password-email, 
#membership-confirm-age-date {
	width:100%;
	box-sizing:border-box;
}

#membership-signin-password-container, #membership-forgot-password-container, #membership-confirm-age-container {
	position: relative;
}

#membership-confirm-age-form .membership-form-item, #membership-create-account-form .membership-form-item {
	position: relative;
}

#membership-forgot-password-form {
	margin-bottom: 28%;
}

.membership-invalid-input {
	border: border: solid 2px var(--neon-red);
}

#membership-invalid-signin-text, #membership-invalid-email-text {
	float: right;
	margin-right: -18px;
}

#membership-invalid-create-underage-password-text, 
#create-account-invalid-guardian-email-text, #create-account-invalid-email-text, #membership-invalid-create-password {
	float: right;
}

.membership-error-text {
	color: var(--neon-red);
}

.membership-form {
	text-align: center;
}

.membership-footer {
	padding: 40px 0px;
	background-color: var(--faded-blue-25);
	width: 100%;
	margin-top: 15px;
}

#membership-forgot-password-btn {
	background-color: var(--marine-blue-40);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Sign In Page ~~~~~~~~~~~~~~~~~~~~~~*/

#membership-signin-form-container {
	display:flex;
	justify-content:center;
}
	#membership-signin-form {
		flex:1;
		border-right:3px solid #032d5a;
		margin-bottom:100px;
	}
		#membership-signin-form .membership-buttons { padding-bottom:0px;}
	#social-login {
		flex:1;
	}

#membership-signin-form label, #membership-forgot-password-form label, #membership-confirm-age-form label {
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
	text-transform: none;
	margin-bottom: 8px;
}

/*#membership-signin-btn, #mobile-membership-signin-btn {
	background-color: var(--marine-blue-40);
}*/

.membership-input::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: var(--marine-blue-40);
}
.membership-input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: var(--marine-blue-40);
    opacity: 1;
}
.membership-input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: var(--marine-blue-40);
    opacity: 1;
}
.membership-input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--marine-blue-40);
}

.membership-input-error {
	border: 2px solid var(--neon-red) !important;
	box-shadow: none !important;
}

.membership-label-error {
	color: var(--neon-red) !important;
}

.membership-error-copy {
	display: none;
	color: var(--neon-red);
	font-size: 12px;
	float: right;
}

#modal-signin-eye {
	position: absolute;
	top: 30px;
	margin-top:-12.5px;
	right: 18px;
	cursor: pointer;
}

#show-login-password-container {
	position: relative;
}

#show-login-eye {
	position: absolute;
	top: 30px;
	margin-top:-12.5px;
	right: 8px;
	cursor: pointer;
}

#membership-signin-btn {
	margin-top: 0px;
}

#membership-forgot-password-link {
	font-size: 18px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Forgot Password ~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~Confirm Age~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#membership-confirm-age-container {
	margin: 0 auto;
	position: relative;
}

.confirm-age-main-calendar {
  float: right;
  top: 30px;
  margin-top:-13.5px;
  right: 18px;
  position: absolute;
  z-index: 2;
}

#membership-confirm-age-form {
	margin-bottom: 70px;
}
#membership-confirm-age-date {
	/*background: url("/images/bmx/site/membership/fa-regular-calendar-alt.png") no-repeat scroll 97% 50%;*/
	padding-right: 30px;
	box-shadow: none !important;
	color: rgba(54, 54, 54, 0.3);;
}

#confirm-age-copy {
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~Create Account~~~~~~~~~~~~~~~~~~~~~~~~*/

.create-account-label {
	text-align: left;
	color: var(--black);
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	box-shadow: none;
	text-transform: none;
}

#membership-create-account-form input {
	box-shadow: none;
}

#create-account-copy {
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
    text-align: left;
}

#create-account-guardian-copy {
	border-top: 2px solid black;
	padding-top: 30px;
	text-align: left;
	padding-bottom: 15px;
}

#create-account-role-container {
	width: 100%;
	border-bottom: 2px solid var(--faded-blue-25);
	margin-bottom: 35px;
}

.btn-role-container {
	width: 50%;
	box-sizing: border-box;
}

.btn-role-container-bottom { flex-basis:100%; }

.btn-text {
	width: 85%;
	text-align: left;
	padding-left: 24px;
}

.btn-group {
	width: 100%;
	display: flex;
}

input.chk-btn {
	opacity: 0.01;
	z-index: 1000;
}

.btn-role {
	display: flex;
	min-height: 52px;
	border-radius: 4px;
  	border: solid 2px var(--french-blue);
	font-family: Arial;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--french-blue);background-color: var(--white);
	background: url("/images/bmx/site/membership/Checkbox.png") no-repeat;
	background-position: 10px center;
	text-transform: none;
	align-items: center;
	justify-content: flex-end;
	padding: 4px;
	margin: 0px;
}

.checked-btn {
	background: url("/images/bmx/site/membership/Checkbox Checked.svg") no-repeat;
	background-position: 10px center;
	background-color: var(--french-blue);
	color: var(--white);
	font-weight: bold;
}

.btn-role-container:nth-child(odd) .btn-role {
	margin: 0px 20px 20px 0px;
}

.btn-role-container:nth-child(even) .btn-role {
	margin: 0px 0px 20px 20px;
}

#create-account-bottom-btn {
	text-align: center;
	margin-bottom: 30px;
}

.create-account-disclaimer {
	margin-top: 10px;
	opacity: 0.7;
	font-family: Arial;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: var(--black);
	width: 340px;
	margin: 0 auto;
}

.link {
	color: var(--dusk-blue);
}

.container-padding {
	padding: 40px 22%;
}

#membership-create-account-container, #membership-create-account-container-underage, #membership-rider-info-container, #membership-safety-container, #membership-payment-container,
#membership-checkout-container, #renewal-existing-container, #renewal-search-container, #checkout-complete-container, #renewal-complete-container, #membership-renewal-status-container, #renewal-safety-container,
#renewal-checkout-container, #renewal-complete-container {
	padding: 40px 22%;
}

#membership-signin-container, #membership-forgot-password-container, #membership-confirm-age-container {
	padding: 0px 22%;
}

#create-account-name-container {
	width: 100%;
	display: flex;
}

#create-account-name-container label {
	width: 100%;
}

#membership-create-account-first {
	margin-right: 20px;
}

.last-name {
	padding-left: 15px;
}

.first-name {
	padding-right: 15px;
}

#account-register-error {
	display: none;
	margin-top: -20px;
	margin-bottom: 17px;
}

.field-icon {
  top: 30px;
  margin-top:-12.5px;
  right: 18px;
  position: absolute;
  z-index: 2;
}

.create-account-eye {
	float: right;
	top: 30px;
	margin-top:-12.5px;
	right: 18px;
	position: absolute;
	z-index: 2;
}

.modal-calendar-icon {
  top: 30px;
  margin-top:-12.5px;
  right: 18px;
  position: absolute;
  z-index: 2;
}

/*~~~~~~~~~~~~~~~~~~~~~~~ New Membership ~~~~~~~~~~~~~~~~~~~~~~*/

#new-membership-form {
	padding: 25px 20px;
	min-height: 580px;
}

.new-membership-form-label {
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
	flex-basis: 100%;
	text-align: left;
	margin-bottom: 10px;
}

.new-membership-role-container {
	width: 80%;
	max-width: 441px;
	margin: 30px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#new-membership-birthday-container { position: relative; margin-bottom: 0px; }

.segmented-buttons { 
	display:flex;
	 width:100%;
	 flex-wrap: wrap;
}

.segmented-button {
	flex:1; 
	position:relative; 
	height: 60px;
	font-family: Arial;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: var(--french-blue);
	position: relative;
	border: solid 2px var(--french-blue);
	background-color: var(--white);
}
	.segmented-button.first-btn { border-radius: 4px 0px 0px 4px; border-right: 0px;}
	.segmented-button.second-btn { border-radius: 0px 4px 4px 0px; }

.segmented-button input[type="radio"] {
	opacity: 0.01;
	z-index: 100;
	position:absolute;
}

.segmented-button input[type="radio"]:checked+label,
.Checked+label {
	background: var(--french-blue);
	color: white;
}

.segmented-button label {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:10px;
	box-sizing:border-box;
  	z-index: 90;
  	color: var(--french-blue);
  	font-family: Arial;
  	font-size: 18px;
  	font-weight: normal;
  	margin: 0px;
  	text-transform: none;
}
	.segmented-button label:hover { background: var(--french-blue); color: var(--white); }

#new-membership-confirm-age-date, #new-membership-self-confirm-age-date {
	width:100%;
	box-sizing:border-box;
	padding: 0px;
	height: 60px;
	border-radius: 4px;
	border: solid 2px var(--french-blue);
	background-color: var(--white);
	font-family: Arial;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--marine-blue);
	padding-left: 18px;
	box-shadow: none !important;
	color: var(--marine-blue);
}

#new-membership-self-inputs, #new-membership-other-inputs, #new-membership-guardian-copy, #new-membership-guardian-input {
	display: none;
}

#new-membership-guardian-copy, #create-account-guardian-copy, #checkout-copy, #renewal-search-copy, #renewal-checkout-copy {
	font-family: Arial;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
}

#checkout-copy-bold {
	margin-top: 10px;
	font-weight: bold;
}

#checkout-date-of-birth, #checkout-age {
	color: red;
	font-size: 16px;
}

#new-membership-guardian-copy {
	text-align: left;
}

#back-to-bmx-btn {
	display: none;
}

/*~~~~~~~~~~~~~~~~~RIDER INFO ~~~~~~~~~~~~~~~~~~~*/

#membership-rider-self-address-1, #membership-rider-address-1 {
	margin-bottom: 23px;
}

.rider-info-flash {
	color: red;
	margin-top: 30px;
	font-size: 16px;
}

.first-btn {
	border-radius: 4px 0px 0px 4px;
	border-right: 0px;
}

.second-btn {
	border-radius: 0px 4px 4px 0px;
}

.middle-btn {
	border-right: 0px;
}

#family-copy, #self-family-copy {
	display: none;
	padding: 0px;
	margin: 0px;
	width: 100%;
}

.mem-type-copy {
	font-size: 12px;
	color: #ED1C36;
	text-align: center;
	width: 100%;
	margin-top: 10px;
}

#first-family-input, #second-family-input, #first-family-self-input, #second-family-self-input, #renewal-first-family-input-container, #renewal-second-family-input-container {
	display: none;
}

#renewal-first-family-input-container, #renewal-second-family-input-container {
	margin: 20px auto;
}

#family-copy {
	display: none;
	width: 80%;
	margin-bottom: 25px;
}

#renewal-family-copy {
	display: none;
	margin-bottom: 25px;
	width: 88%;
    padding-top: 0px;
}

#renewal-memtype-container {
	margin: 30px 22%;
}

.membership-select-dropdown {
	width: 100%;
	height: 60px;
	border-radius: 4px;
	border: solid 2px var(--french-blue);
	background-color: var(--white);
	font-family: Arial;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--french-blue);
	padding-left: 18px;
	padding-right: 6px;
	-webkit-appearance: none;
	-moz-appearance: window;
	background-image: url("/images/bmx/site/membership/Dropdown Icon.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 12px ) center;
}

.btn-skill-container {
	box-sizing: border-box;
}

.skill-btn-novice {
	width: 85%;
	text-align: left;
	padding-left: 24px;
}

.btn-group {
	width: 100%;
	display: flex;
}

input.skill-btn {
	opacity: 0.01;
	z-index: 1000;
}

input.membership-skill-btn {
	opacity: 0.01;
	z-index: 1000;
}

.btn-skill {
	width: 193px;
	height: 193px;
	border-radius: 4px;
  	border: solid 2px var(--french-blue);
	color: var(--french-blue);
	background-color: var(--white);
	background: url("/images/bmx/site/membership/Checkbox@3x.png") no-repeat;
	background-position: 98% 2%;
	background-size: 21px 21px;
	text-transform: none;
	align-items: center;
	justify-content: space-between;
	padding: 4px;
	margin: 0px;
}

.checked-btn-skill {
	background: url("/images/bmx/site/membership/Checkbox Checked.svg") no-repeat;
	background-position: 98% 2%;
	background-size: 21px 21px;
	background-color: var(--french-blue);
	color: var(--white) !important;
}

.checked-btn-text {
	color: var(--white) !important;
}

.skill-btn-group {
	width: 441px;
	display: flex;
	margin: 23px auto;
	justify-content: space-between;
	flex-wrap: wrap;
}

.skill-btn-image {
	margin: 10px auto;
	height: 82px;
}

.skill-btn-title {
	font-family: Industry;
	font-size: 18px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: var(--dusk-blue);
	width: 100%;
	padding-top: 8px;
}

.skill-btn-desc {
	opacity: 0.65;
	font-family: Arial;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: var(--black);
	padding: 7px 10px;
}

#gold-membership-btn {
	border: 2px solid #fff000;
}

#skill-novice {
	background: url("../images/bmx/site/membership/Novice Trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-novice.checked-btn-img {
	background: url("../images/bmx/site/membership/Novice Trophy White@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;

}

#skill-underage-novice {
	background: url("../images/bmx/site/membership/intermediate-trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-underage-novice.checked-btn-img {
	background: url("../images/bmx/site/membership/Intermediate Trophy White@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-bal-bike {
	background: url("../images/bmx/site/membership/Novice Trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-bal-bike.checked-btn-img {
	background: url("../images/bmx/site/membership/Novice Trophy White@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-intermediate {
	background: url("../images/bmx/site/membership/intermediate-trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-intermediate.checked-btn-img {
	background: url("../images/bmx/site/membership/Intermediate Trophy White@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-expert {
	background: url("../images/bmx/site/membership/expert-trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-expert.checked-btn-img {
	background: url("../images/bmx/site/membership/Expert Trophy White@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-a-pro {
	background: url("../images/bmx/site/membership/pro-trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-a-pro.checked-btn-img {
	background: url("../images/bmx/site/membership/Pro Trophy White@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-vet-pro {
	background: url("../images/bmx/site/membership/vet-pro-trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#skill-vet-pro.checked-btn-img {
	background: url("../images/bmx/site/membership/Vet Pro Trophy White@3x.png") no-repeat center;
	background-size: contain;
	height: 82px;
	width: 100%;
}

#membership-standard {
	background: url("../images/bmx/site/membership/Standard Trophy Blue@3x.png") no-repeat center;
	background-size: contain;
	height: 74px;
	width: 100%;
}

#membership-standard.checked-btn-img {
	background: url("../images/bmx/site/membership/standard-trophy-white@3x.png") no-repeat center;
	background-size: contain;
	height: 74px;
	width: 100%;
}

#membership-gold {
	background: url("../images/bmx/site/membership/gold-trophy-blue@3x.png") no-repeat center;
	background-size: contain;
	height: 74px;
	width: 100%;
}

#membership-gold.checked-btn-img {
	background: url("../images/bmx/site/membership/gold-trophy@3x.png") no-repeat center;
	background-size: contain;
	height: 74px;
	width: 100%;
}

.racing-info-section {
	margin: 30px 0px;
}

.under-5-skills, .girls-skills, .boys-skills, .adult-skills, .over-33-skills, .over-19-skills, #racing-info-mem-level, .league-skills {
	display: none;
}

/*~~~~~~~~~~~~~~~~~~~~ SAFETY ~~~~~~~~~~~~~~~~~~~~*/

.download-waiver-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.download-waiver-container a, .download-waiver-container a:visited {
	font-size: 18px;
	font-family: Arial;
	color: var(--dusk-blue);
}

.pdf-icon {
	background: url("../images/bmx/site/membership/pdf-icon@3x.png") no-repeat center;
	background-size: contain;
	height: 48px;
	width: 50px;
}

.safety-hr {
	border-top: 2px solid black;
	width: calc(100%+60px);
	margin: 35px -30px;
}

.waiver-container {
	display: flex;
    width: 325px;
    justify-content: flex-end;
}

.waiver-link {
	padding-top: 14px;
	padding-right: 10px;
}

.mt-25 {
	margin-top: 25px;
}

/*~~~~~~~~~~~~~~ ADD PAYMENT ~~~~~~~~~~~~~~~*/

#membership-paymemt-exp-container, #renewal-payment-exp-container {
	display: flex;
}

#exp-date-inputs, #renewal-exp-date-inputs {
	display: flex;
	flex-wrap: wrap;
}

#exp-label, #renewal-exp-label {
	flex-basis: 100%;
	width: 100%;
}

#membership-payment-exp-year, #membership-payment-exp-month, #renewal-payment-exp-year, #renewal-payment-exp-month {
	width: 42%;
	margin: 1px 5px;
}

#exp-cvv, #renewal-exp-cvv {
	width: 75%;
}

.payment-country-container {
	background-color: #D3D3D3;
	margin-bottom: 30px;
}

.payment-country-text {
	font-size: 16px;
	font-weight: bold;
}

.payment-country-header {
	color: white;
	background-color: #3772A5;
	font-weight: bold;
	font-family: Arial;
	font-size: 18px;
	width: 100%;
	padding: 10px 0px;
}

.payment-country-row {
	display: flex;
	margin-top: 20px;
}

.payment-radio {
	padding: 16px 19px;
}

.payment-can-logo {
	width: 118px;
	background: url("../images/bmx/site/ca_logo_sticky.png") no-repeat center;
	background-size: contain;
	margin-left: 15px;
}

.payment-usa-logo {
	width: 118px;
	background: url("../images/bmx/site/us_logo_sticky.png") no-repeat center;
	background-size: contain;
	margin-left: 15px;
}

.card-images, .renewal-card-images {
	display: flex;
	padding: 0px 10px;
	margin-bottom: 20px;
	width: 100%;
}

.visa-img {
	height: 38px;
	width: 70px;
	background: url("../images/bmx/site/membership/visa-icon.png") no-repeat center;
	background-size: contain;
	margin-right: 10px;
}

.mastercard-img {
	height: 38px;
	width: 70px;
	background: url("../images/bmx/site/membership/master-card-icon.png") no-repeat center;
	background-size: contain;
	margin-right: 10px;
}

.discover-img {
	height: 38px;
	width: 70px;
	background: url("../images/bmx/site/membership/discover-icon.png") no-repeat center;
	background-size: contain;
	margin-right: 10px;
}

.amex-img {
	height: 38px;
	width: 70px;
	background: url("../images/bmx/site/membership/american-express-icon.png") no-repeat center;
	background-size: contain;
	margin-right: 10px;
}

#billing-first, #billing-last, #renewal-billing-first, #renewal-billing-last {
	width: 100%;
}

#billing-first, #renewal-billing-first {
	padding-right: 15px;
}

#billing-last, #renewal-billing-last {
	padding-left: 15px;
}

#payment-name-container, #renewal-payment-name-container {
	display: flex;
}

/*~~~~~~~~~~~~~~~~~~ CHECKOUT ~~~~~~~~~~~~~~~~~~~~`*/

.checkout-breakdown-container {
	background-color: var(--faded-blue-15);
	margin: 30px -50px;
	text-align: left;
	padding: 37px 70px;

}

.checkout-breakdown {
	margin: 34px auto;
    padding: 0px 49px;
    border-bottom: 2px solid black;
}

.checkout-breakdown-title {
	font-family: industry, sans-serif;
	font-size: 20px;
	font-weight: bold;
}

.checkout-item {
	display: flex;
	margin-bottom: 20px;
	justify-content: space-between;
}

.checkout-item-title {
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: var(--black);
}

.checkout-item-value {
	font-family: Arial;
	font-size: 16px;
	color: var(--black-70);
	text-transform: capitalize;
}

#checkout-rider-name, #renewal-checkout-rider-name {
	text-transform: capitalize;
}

.checkout-total {
	display: flex;
	justify-content: space-between;
}

.promo-code-container {
	display: flex;
	width: 100%;
    margin-bottom: 41px;
    justify-content: center;
    flex-wrap: wrap;
}

.promo-code-label {
    text-align: right;
    padding-top: 20px;
    padding-right: 10px
}

#promo-flash, #renewal-promo-flash {
	display: none;
	width: 100%;
	font-size: 16px;
	text-align: center;
	margin-top: 10px;
}

#membership-promo-code, #renewal-promo-code {
	width: 170px;
	height: 49px; 
}

#membership-apply-promo, #renewal-apply-promo {
    background-color: #4477AC;
    margin-left: 20px;
    height: 49px;
    border-radius: 3px;
    width: 136px;
    color: white;
    font-family: Arial;
    font-weight: bold;
    font-size: 16px
}

#autorenew-label {
	height: 60px;
	margin-top: 15px;
	justify-content: flex-start;
}

/*~~~~~~~~~~~~~~~~~~~~~~ Checkout Success  ~~~~~~~~~~~~~~~*/

#checkout-success-header, #renewal-checkout-success-header {
	font-size: 26px;
	font-weight: bold;
	font-family: industry, sans-serif;
	text-align: center;
	width: 100%;
	margin-top: 20px;
}

#download-card-link {
	font-size: 18px;
}

.pdf-icon-small {
	background: url("../images/bmx/site/membership/pdf-icon@3x.png") no-repeat center;
	background-size: contain;
	height: 29px;
	width: 21px;
	display: inline-block;
	padding-right: 3px;
	margin-bottom: -6px;
}

.apple-wallet-icon {
	background: url("../images/bmx/site/membership/apple-wallet-icon@2x.png") no-repeat center;
	background-size: contain;
	height: 32px;
	width: 108px;
	display: inline-block;
}

#checkout-card-links {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

#checkout-membership-card, #renewal-membership-card {
	border: 1px solid;
    width: 370px;
    margin: 0px auto;
    margin-bottom: 20px;
}

/*~~~~~~~~~~~~~~~~~~~~~~ Upgrade Trial to Full ~~~~~~~~~~~~~~*/

#upgrade-inputs-container {
	display: flex;
	justify-content: space-between;
	margin: 20px 15%;
}

#upgrade-copy  {
	padding-top: 3%;
}

#upgrade-flash {
	visibility: hidden;
}
.upgrade-input {
	width: 100%;
	padding: 0px 15px;
}

#upgrade-serial-number, #upgrade-validation-code {
	width: 95%;
}
/*~~~~~~~~~~~~~~~~~~~~~ Renewal Welcome ~~~~~~~~~~~~~~~~~~~*/

#existing-memberships-btn {
	padding: 22px 20px;
}


#search-existing-mems-link {
	font-size: 18px;
	display: block;
	width: 100%;
	margin: 10px auto;
}

#existing-mems-link {
	font-size: 18px;
	display: block;
	width: 100%;
	margin: 10px auto;
	padding-bottom: 20px;
}

.existing-mem-container:nth-child(odd) {
	background-color: var(--faded-blue-15);
}

.existing-mem-container {
	margin: 30px -50px;
	text-align: left;
	padding: 37px 70px;
}

.mem-item-title {
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: var(--black);
}

.mem-item-value {
	font-family: Arial;
	font-size: 16px;
	color: var(--black-70);
	font-weight: bold;
}

.mem-container {
	margin: 34px auto;
    padding: 0px 49px;
}

.memberships-existing-renew {
	display: flex;
}

.membership-renew-btn {
	width: 430px;
	height: 40px;
	color: var(--white);
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	border-radius: 3px;
	border: solid 2px var(--marine-blue);
	background-color: var(--marine-blue);
	text-align: center;
	margin: 0px auto;
}

#search-name-inputs, #renewal-search-inputs-container {
	display: flex;
}

#search-name-inputs {
	flex-wrap: wrap;
}

#renewal-search-error {
	width: 100%;
	font-size: 12px;
	color: #ED1C36;
	font-family: Arial;
	visibility: hidden;
}

#search-existing-btn {
	height: 60px;
	width: 180px;
	color: white;
	border-radius: 3px;
	border: solid 2px var(--marine-blue);
	background-color: var(--marine-blue);
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
}

#search-first {
	width: 40%;
    margin-right: 10px;
}

#search-last {
	width: 55%;
}

#search-or {
	width: 18%;
	padding-top: 13px;
	align-items: center;
	display: flex;
	justify-content: center;
}

#memberships-container {
	margin-top: 35px;
}

#search-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 35px;
}

#renewal-search-table {
	width: 100%;
}

#renewal-search-table th {
	background-color: var(--white);
	padding: 15px;
	font-family: industry, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: var(--dusk-blue);
	border: 0px;
}

#renewal-search-table td {
	color: rgba(54, 54, 54, 0.5);
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	border: 0px;
	padding: 15px;
}

#renewal-search-table tr:nth-child(odd) td {
	background-color: var(--faded-blue-15);
}

#renewal-search-table .renewal-search-name {
	color: var(--black);
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
}

.search-renew-btn {
	width: 121px;
	height: 30px;
    color: var(--white);
    font-family: industry, sans-serif;
    font-size: 18px;
    font-weight: bold;
    border-radius: 3px;
    border: solid 2px var(--marine-blue);
    background-color: var(--marine-blue);
    text-align: center;
    margin: 0px auto;
    letter-spacing: 1px
}

#renewal-search-table-container {
	padding: 10px 30px;
}

#renew-search-pagination {
	display: block;
	margin: 0px auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page-arrow {
	height: 30px;
}

.renewal-search-pagination {
	margin: 0px auto;
	list-style: none;
	padding: 0px;
}

.renewal-search-pagination li {
	display: inline-block;
	padding: 10px;
}

.renewal-search-pagination li a {
	font-family: industry, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: var(--french-blue)
}

.renewal-search-pagination .current {
	background-color: var(--neon-red);
    border-radius: 50%;
    height: 17px;
    width: 13px;
    padding-top: 6px;
}

.renewal-search-pagination .current a {
	color: white;
	cursor: none;
}

.track-text {
	font-weight: normal;
	font-size: 14px;
	font-family: Arial;
}


/*~~~~~~~~~~~~~~~~Renewal Confirm Status~~~~~~~~~~~~~~~*/

#not-legal-guardian {
	display: none;
	font-family: Arial;
	font-size: 18px;
}

/* =================================================================
	Social Login (Facebook, Google)
	* Tavo
================================================================= */
.social-account-btn { margin:25px 0px; }
.google-account-btn {
	width:80%;
	max-width:352px;
	box-sizing:border-box;
	border-radius:3px;
	color:#757575;
	display:inline-block;
	padding:22px 22px 22px 60px;
	box-shadow:0 2px 4px 0 rgba(0,0,0,.25);
	font-family:'Roboto', sans-serif;
	font-size:16px;
	font-weight:bold;
	text-align:left;
	background:#ffffff url('/images/google-icon.svg') left center no-repeat;
	background-size:60px 60px;
	transition: all 0.218s linear;
	cursor:pointer;
}
	.google-account-btn:visited { color:#757575; }
	.google-account-btn:hover { text-decoration:none; box-shadow:0 0 3px 3px rgba(66,133,244,.3); }
.facebook-account-btn {
	width:80%;
	max-width:352px;
	box-sizing:border-box;
	border-radius:3px;
	color:#fff;
	display:inline-block;
	padding:22px 22px 22px 60px;
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	font-weight:bold;
	text-align:left;
	letter-spacing:0.25px;
	background:#1877f2 url('/images/facebook-icon.svg') left 18px center no-repeat;
	background-size:25px 25px;
	transition:all 0.218s linear;
	cursor:pointer;
}
	.facebook-account-btn:visited { color:#fff; }
	.facebook-account-btn:hover { text-decoration:none; color:#fff; background-color:#4267B2; }

.facebook-account-btn-outside {
	width:100%;
	box-sizing:border-box;
	border-radius:3px;
	color:#fff;
	display:inline-block;
	padding:20px 20px 20px 58px;
	font-family:Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	letter-spacing:0.25px;
	background:#1877f2 url('/images/facebook-icon.svg') left 18px center no-repeat;
	background-size:25px 25px;
	transition:all 0.218s linear;
	cursor:pointer;
}

.google-account-btn-outside {
	width:100%;
	box-sizing:border-box;
	border-radius:3px;
	color:#757575;
	display:inline-block;
	padding:20px 20px 20px 58px;
	box-shadow:0 2px 4px 0 rgba(0,0,0,.25);
	font-family:'Roboto', sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	background:#ffffff url('/images/google-icon.svg') left center no-repeat;
	background-size:60px 60px;
	transition: all 0.218s linear;
	cursor:pointer;
}

#google-container-login, #facebook-container-login {
	margin-bottom: 8px;
	padding: 5px;
}

#or-show-login {
	display: block;
	width: 100%;
	margin: 10px auto;
	text-align: center;
}

#facebook-btn-signin {
	margin-top: 46px;
	margin-bottom: 43px;
}
/* 
[Tavo] - I don't need these yet...
Responsive stuff. These sizes are arbitrary but work pretty well for me. 
@media screen and (max-width:1024px) {
	.membership-main-content {
		background-color:rgba(255,0,0,0.2);
	}
 }
@media screen and (max-width:800px) { 
	.membership-main-content {
		background-color:rgba(255,0,0,0.4);
	}
}
@media screen and (max-width:640px) { 
	.membership-main-content {
		background-color:rgba(255,0,0,0.6);
	}
}
@media screen and (max-width:480px) { 
	.membership-main-content {
		background-color:rgba(255,0,0,0.8);
	}
}
@media screen and (max-width:320px) { 
	.membership-main-content {
		background-color:rgba(255,0,0,1);
	}
}
*/