/* convio overrides */
@font-face {
	font-family: 'Cachet Bold';
	src: url('https://s3.us-east-2.amazonaws.com/ymca-donation-redesign/fonts/Cachet-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Cachet Medium';
	src: url('https://s3.us-east-2.amazonaws.com/ymca-donation-redesign/fonts/Cachet-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Cachet Book';
	src: url('https://s3.us-east-2.amazonaws.com/ymca-donation-redesign/fonts/Cachet-Book.woff') format('woff');
}
div.donation-level-container {
	border:none;
	-webkit-border-radius:0;
	border-radius:0;
	margin:0;
}
div.donation-level-label-input-container {
	display:none;
}
html, body {
	font-size:10px;
	overflow-x:hidden;
}
body {
	font-family:'Cachet Book', 'Cachet-Book', verdana, sans-serif;
	
	
}
div.form-content {
	width:100% !important;
	margin:0 !important;
	padding:0 !important;
}
#donor_email_opt_in_Row, .auto-opt-in-warning-message {
	display:none !important;
}
/* text */
.donation-form-content .group-0 .html-caption-container,
.donation-form-content .group-0 .html-caption-container p {
	color:#5b318f;
	font-size: 2rem;
	line-height:26px;
}

.donation-form-content {
	font-size:1.2rem;
	font-weight:normal;
	color:#902c8d;
}
.custom-field-container .radio-button-container .form-input-label-block label{
    font-size:1.2rem;
    color:#902c8d;
}
select,
option {
    color:#902c8d;
}

/* header */
#head {
    width:100%;
    max-width:1224px;
    margin:0 auto;
    height:138px;
    vertical-align:middle;
    font-size: 3.6rem;
    text-transform:uppercase;
    color:#93007b;
    vertical-align:middle;
}
#head .logo {
    margin-top:1%;
    display:inline-block;
    float:left;
	margin-left: 112px;
}
#head .title {
    display:inline-block;
    float:right;
    margin-top:3%;
	margin-right:112px;
	font-family:'Cachet Bold', sans-serif;
}
/* footer */
#foot {
    position:relative;
    bottom:0;
    height:100%;
	width:100vw;
    margin:auto;
    text-align:center;
    display:flex;
    flex-direction:column;
}
#transition {
/*    flex-grow:1;
    height:80px;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.7));*/
}
#logos {
    background:#fff;
    flex-grow:1;
    padding:0 0 60px 0;
background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,1));

}
div#logos-inner {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
}
div#logos-inner img {
    margin:0 1rem;
    max-height:80px;
    vertical-align:middle;
    text-align:center;
}

/* general layout */
#ProcessForm {
	max-width: 100vw;
	width:100%;
	background-color:transparent;
	margin: 0 !important;
	padding: 0 !important;
	background-attachment:fixed;
	background-size: cover;
	border-radius:0;
	border:none;
}

/*
div.donation-form-container.responsive {
	max-width:1224px;
	width:100%;
	background-color:transparent;
	margin:0 auto;
	padding: 75px 20vw 0 20vw;

    background-attachment:fixed;
	border-radius:0;
	border:none;
}
*/
div.donation-form-container.responsive {
	max-width:1224px;
	width:100%;
	margin:0 auto;
	padding:40px 0 0 0;
	border-radius:0;
	border:none;
	background:transparent;
}
.donation-form-content {
	margin:0 60px;
    background:#fff;
    padding:0px;
    border-radius:6px;
    width:503px;
    min-height:60vh;

}
.form-group {
	position:relative;
}
.progress-bar {
    background:#6f47a0;
    color:#fff;
    width:503px;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    text-align:center;

}
.prog-nav {
    display:inline-block;
    margin:24px 16px;
    text-transform:uppercase;
    font-family:'Cachet Bold', sans-serif;
    font-size:1.4rem;
    font-weight:600;
        
}
.prog-nav.active {
    border-bottom:3px solid #fff;
    padding-bottom:8px;
}
.section-header-container {
    display:none;
}
.section-header-container {
	background:#6f47a0;
	 border-radius:16px;
	 color:#fff;
    margin:0;
	border:none;
	padding:0;    
}
select {
    border-color:#ccc;
    border-radius:6px;
    padding:4px;

}
.donation-form-content .form-group div .form-row {
    margin:0;
    padding:0;
}
.donation-form-content .form-group .form-row {
    margin:0;
    padding:0 25px;
}
/* switch ask amount radios to buttons */
div#level_standard_row .FormLabelText, 
.section-header, #payment_cc_container h3 {
    text-transform: uppercase;
    height: 30px;
    font-size: 1.6rem;
    padding-bottom: 0px;
    text-transform: uppercase;
    display: block;
    color: #5b318f;
    font-weight: 400;
    margin: 0;
    font-family: 'Cachet Medium';
}
.donation-levels {
    width:100%;
    display:block;
}

div.donation-level-container {
	margin-right:12px;
	float:left;
	height:60px;

}
div.donation-level-input-container {
    padding:0;
    margin:0;
}
.donation-levels label, .donation-levels input {
    display:block;
    position:relative;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.donation-levels input[type="radio"] {
    opacity:0.01;
    z-index:100;
}

.donation-levels input[type="radio"]:checked + label,
.donation-levels label.Checked {
    background:#6f47a0 !important;
	 border-color:#6f47a0;
	color:#fff !important;
}
div.donation-level-label-container {
     vertical-align:middle;	
	 font-family:inherit;
}
.donation-levels label {
     padding:5px;
     border:3px solid #a344a0;
     background-color:#a344a0;
     color:#fff;
     cursor:pointer;
     z-index:90;
     min-width:120px;
     max-width: 160px;
     height:30px;
     font-size:1.6rem;
     text-align:center;
     vertical-align:middle;
     font-weight:bold;
     border-radius:6px;
     display: inline-block;
	font-family: 'Cachet Bold', 'Cachet-Bold', verdana, sans-serif;
}

.donation-levels label:hover {
     background:#6f47a0;
	 border-color:#6f47a0;
}
.donation-level-user-entered  {
	display: inline-block !important;
    width: 100%;
    max-width: 220px;
    margin: 0px !important;
    position: relative;
	height:30px;
	border:3px solid #a344a0 !important;
	border-top-left-radius:0 !important;
	border-bottom-left-radius:0 !important;
	border-bottom-right-radius:6px;
	border-top-right-radius:6px;
	-webkit-border-top-left-radius:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	vertical-align:middle;
	padding:5px 0;
	position:relative;
	left:-7px;
	
}
.donation-level-user-entered label {
	display:none !important;
}
.donation-level-user-entered  input[type=text] {
	display:inline-block !important;
	border:none;
	width: auto;
	height:28px;
	margin: 0 10px;
	padding:0;
	box-shadow: none !important;
	border: none !important; 
	vertical-align: middle;
	top: -4px;
	text-align:right;
	font-size:1.6rem;
	color:#a344a0;
	font-weight:600;
}
.donation-level-user-entered:before {
	content:'$';
	font-size:1.6rem;
	color: #a344a0;
	font-weight:bold;
	position:relative;
	left:7px;
	top:-5px;
	z-index:1000;
	display:inline-block;
}

.donation-level-container:last-child, 
.donation-level-container:last-child .form-content, 
.donation-level-container:last-child .form-content .donation-level-input-container {
	float:left;
	clear:left;
	width:100%;

}
.donation-level-container:last-child {
	margin:0 !important;
	padding:0 !important;

}
.donation-level-container:last-child label {
	background-color:#fff;
	color:#a344a0;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	width:50%;
	max-width:200px;
}
/* form field styles */

/* custom checkboxes */
input[type=checkbox],
input[type=radio] {
    position:absolute;
	opacity:0;
	cursor:pointer;
	z-index:1000;
}
span.checkbox, 
span.radio {
	position:absolute;
	top:0;
	left:0;
	height:15px;
	width:15px;
	background-color:#fff;
	border:3px solid #902c8d;
	border-radius:5px;
	cursor:pointer;
}
.radio-button-container label {
	margin-left:25px;
}
span.radio {
	border-radius:15px;
	
}
.form-checkbox .form-content label {
	cursor:pointer;
}
.form-checkbox .form-content:hover input ~ span.checkbox, 
.form-checkbox input:checked ~ .checkbox {
	background-color:#902c8d;
}
.radio-button-container:hover input ~ span.radio, 
.radio-button-container input:checked ~ .radio {
	background-color:#902c8d;
}
/* Create the checkmark/indicator (hidden when not checked) */
.form-checkbox .checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
input:checked ~ .checkbox:after {
  display: block;
}

/* Style the checkmark/indicator */
.form-checkbox .checkbox:after {
  left:4px;
  top: 0px;
  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[type=text], 
input[type=email], 
#billing_addr_street1_row input, 
#billing_addr_street2_row input {
    border:3px solid #a344a0 !important;
    border-radius: 6px !important;
    padding: 5px 5px !important;
    vertical-align: middle !important;
    height: 22px !important;
    margin-bottom:15px !important;
}
select {
    width:396px;
	border:3px solid #a344a0 !important;
	border-radius:6px;
	padding:4px 5px;
    height: 38px !important;
    margin-bottom:15px !important;
}




/* contact information styles */
/* contact information styles */
input[type=text] {
    width:93%;
    max-width:93%;
}
select {
	width:100%;
}
#employer_street_row input,
#billing_addr_street1_row input,
#billing_addr_street2_row input,
#billing_addr_street3_row input,
#billing_addr_country_row input.ui-autocomplete-input,
#donor_addr_street1_row input,
#donor_addr_street2_row input,
#donor_addr_street3_row input,
#donor_addr_country_row input.ui-autocomplete-input,
#shipping_addr_street1_row input,
#shipping_addr_street2_row input,
#shipping_addr_street3_row input,
#shipping_addr_country_row input.ui-autocomplete-input,
#tribute_notify_recip_street1_row input,
#tribute_notify_recip_street2_row input,
#tribute_notify_recip_street3_row input,
#tribute_notify_recip_country_row input.ui-autocomplete-input,
#tribute_signature_row input,
#tribute_message_closing_row input,
div.employer-address-container input#employer_street {
    width: inherit;
}
.group-1  .form-row  .form-content {
    position:relative !important;

}
.group-1 .form-row {
    margin-bottom:15px;
}
span.field-required {
    display:none !important;
}
.group-1  label {
    position:absolute !important;
    top:14px;
    left:12px;
}
.group-1  input,
.group-1 select {
    position:absolute !important;
    top:0;
    background-color:transparent;
    z-index:1000;
	box-shadow:none !important;

}
.group-1 select option:first-child {
    color:#fff !important;
}
.group-1 input:focus {
   background-color:#fff;
   transition:0.4s;
}
.group-1 .form-text, 
.group-1 .form-selectlist,
.group-1  .form-checkbox {
	min-height:50px;
	max-height:50px;
}

div#donor_remember_me_row {
    width:200px;
    display:block;
    vertical-align:middle;
    padding-top:20px;
}
div#donor_remember_me_row .form-content {
    position:relative;
    display:table;
    width: 220px !important;
    vertical-align:middle;
}
input#donor_remember_mename {
    display:table-cell;
    width:14px;
    /* float:left; */
    /* clear:none; */
    margin-right:6px;
    vertical-align:middle;
    position:relative !important;
    top:0;
}

div#donor_remember_me_row label {
    display:table-cell;
    /* width:130px; */
    float:left;
    clear:none;
    margin-left:15px;
    vertical-align:middle;
    position:relative !important;
    text-align:left;
    top:0;
}

input#billing_first_namename, 
input#billing_addr_cityname
input#billing_addr_zipname


  {
     margin-right:6px;
}
input#billing_last_namename,
select#billing_addr_state,
select#billing_addr_country {
	margin-left:6px;
}
input#donor_email_addressname, 
input#billing_addr_street1name, 
input#billing_addr_street2name {
    width:96% !important;
    max-width:96% !important;
}
div#billing_first_name_row, 
div#billing_last_name_row,
div#billing_addr_city_row, 
div#billing_addr_state_row, 
div#billing_addr_zip_row,
div#billing_addr_country_row {
    display:inline-block;
    width:44%;
    margin:0;
    padding:0;

}
div#billing_first_name_row,
div#billing_addr_city_row,
div#billing_addr_zip_row {
    margin-left:25px;
    margin-right:0;
}
div#billing_last_name_row,
div#billing_addr_state_row,
div#billing_addr_country_row  {
    margin-left:0;
    margin-right:0;
}

/* Payment Page */
#responsive_payment_typecc_type_row {
	display:none;
}
#payment_cc_container {
	margin:0 24px;
}
#responsive_payment_typecc_numbername{
	width:100% !important;
}
#payment_cc_container label {
   position:absolute;
   padding-top:14px;
   padding-left:6px; 	
}
#responsive_payment_typecc_exp_date_row label {
	display:none;
}

div#responsive_payment_typecc_exp_date_row, 
div#responsive_payment_typecc_cvv_row {
    width:50%;
    float:left;
    clear:none;
    vertical-align:middle;
    padding:0;
    margin:0;
}
input#responsive_payment_typecc_cvvname {
    margin-top:0;
}
div#responsive_payment_typecc_cvv_row a.HelpLink {
    display:none;
}

.cardExpGroup select {
	width:32%;
	margin:0;
}
div.button-container {
    border:none;
    padding:0;
	position:relative;
	bottom:0px;
	width:100% !important;
}
/* designation */
.custom-field-container .radio-button-container {
    margin:6px 0px;
    position:relative;
    height:24px;
    vertical-align:middle;    
}
.donation-form-content .form-group .form-row.custom-field-container {
    margin:6px 0x;
}
.custom-field-container .form-input-label-block {
    text-transform:uppercase;
    height:30px;
    font-size:1.6rem;
    padding-bottom:0px;
    text-transform:uppercase;
    display:block;
    color:#5b318f;
	font-weight:400;
	margin:0;
	
}
.custom-field-container .form-input-label-block label {
	font-family:'Cachet Medium';
}
.custom-field-container fieldset .form-input-label-block {
    font-family:initial;
    font-weight:initial;
    text-transform:initial;
    color:initial;
    font-size:initial;
    padding:initial;
    height:initial;
}
.custom-field-container fieldset .form-input-label-block label {
	inherit;
}
/*  form footer nav group and buttons */

.nav-group {
    display:block;
    width:100%;
    vertical-align:middle;
    margin:auto;
    position: relative;
    bottom:0px;
    margin-top: 16px;
    height: 50px;
    /* float: left; */
    /* clear: both; */
    background: white;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.button-sub-container {
	position:relative;
	bottom:0px;
}
.btn {
    border:none;
    max-width:150px;
    margin:0px 22px 0px 22px;
    padding:12px 24px;
    border-radius:6px;
    color:#fff;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    background-color:#16bcf0;
    cursor:pointer;
	font-family: 'Cachet Bold', 'Cachet-Bold', verdana, sans-serif;
}
.btn.next {
    float:right;
}
.btn.back
 {
      float:left;  
}
.button-sub-container .back.btn {
    margin-top:8px;
}
div.responsive button.action-button {
    border:none;
    max-width:150px;
    padding:12px 24px;
    border-radius:6px;
    color:#fff;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    background-color:#0d62ac;
    background-image:none;
    cursor:pointer; 
    margin-top: 8px;
	margin-right:24px;
	font-family:'Cachet Bold', 'Cachet-Bold', verdana, sans-serif;
}
div.responsive button.action-button:hover {
	background-color:#16bcf0;
	background-image:none;
}
.finish-step {
	float:right;
	display:block;
	margin-left:20px;
}

/* ERRORS */
div.responsive div.ErrorMessage.page-error {
    position:relative;
    top:0px;
    width:478px;
    margin:0 50px;
    padding:20px;
    border:none;

}
div.responsive div.ErrorMessage.page-error span.field-error-indicator {
    display:none;
}



div.responsive div.ErrorMessage.page-error span.field-error-text {
    background:transparent;
    border:none;

}
.form-row .ErrorMessage {
    display:none;
}
.form-error input[type=text] {
    border-color:red !important;
}

div.responsive div.form-error {
    border: none;
    background-color: transparent;
    padding: inherit;
    margin-top: inherit;
}

/* TY */
.ty-body {
    margin:20px;
}

@media only screen and (max-width: 991px) and (min-width: 800px) {
    span.title { font-size:2.6rem}

	div#logos-inner {
		margin: 0 auto;
	}
}
@media only screen and (max-width: 800px) {
	#ProcessForm {
		margin:0;
		padding:0;
		
	}
	body {
		overflow:visible;
	}
	div.responsive {
		width:100vw !important;
		max-width:100vw !important;
		margin:0 !important;
	}
	.donation-form-content {
		margin:inherit auto;
	}
	#head {
		height:134px;
	}
	#head .logo {
		height:75%;
		margin:12px;
		
	}
	#head .title {
		font-size:2.8rem;
		margin:12px;
	}
	#foot {
		margin:auto;
	}
	#logos {
		margin:inherit -20vw;
	}
	div#logos-inner {
		margin: 0 auto;
	}
}
@media only screen and (max-device-width: 500px) {
	body, html {
		font-size:9px;
		text-size-adjust:none;
		-webkit-text-size-adjust:none;
		
	}
	.donation-level-container:last-child label {
		max-width:80px !important;
	}
	.donation-level-user-entered {
		max-width:30vw;
	}
	.donation-level-user-entered input[type=text]{
		width:80px !important;
	}
	#foot {
		background-color:#ebeadd;
		width:100vw;
		margin:auto;
	}
	#logos {
		width:100vw;
		margin:auto;
	}

	div#logos-inner {
		width: 100vw;
		height: 100px;
		margin: 0 0;
		vertical-align: middle;
		text-align: center;
	}
	 div#logos-inner img {
		max-height:45px !important;
		margin:.5rem;
	}
}
@media only screen and (max-width: 600px) {
	body {
		overflow-x:hidden;
		-webkit-text-size-adjust:none;
	}
	div.responsive {
		width:100vw !important;
		max-width:100vw !important;
		margin:0 !important;
		padding:0 !important;
	}
	.donation-form-content {
		width:100% !important;
		height:100% !important;
		background-image:none !important;
		background-color:#fff;
		margin: 0;
		border-radius:0;
	}
	.form-row.form-donation-level {
		width:100%;
		margin:0;
		padding:0;
		display:block;
	}
	.donation-level-container:last-child label {
		max-width:150px;
	}
	.donation-level-user-entered {
		max-width:40vw;
	}
	.donation-level-user-entered input[type=text]{
		width:100px;
		top:0;
	}
	.progress-bar {
		margin:0;
		width:100%;
		/*border-top-left-radius: 0;
		border-top-right-radius: 0;*/
	}
	#head {
		height:134px;
	}
	div#donor_email_address_row, 
	div#billing_addr_street1_row, 
	div#billing_addr_street2_row {

		
	}
	input[type=text], input[type=email], #billing_addr_street1_row input, #billing_addr_street2_row input {

	}
	#head .logo {
		height:50%;
		margin:24px 12px;
		
	}
	#head .title {
		font-size:2rem;
		margin:24px 12px;
		width:50%;
		word-wrap:break-word;
		float:right;
	}
	.nav-group, 
	.div.button-container	{
		display:block;
		width:100%;
		vertical-align:middle;
		margin:15px auto 15px auto !important;
		position:relative !important;
		bottom:0px;
	}
	.group-1 .nav-group {
		margin-top:20px !important;
	}
	.group-2 .nav-group {
		position:relative !important;
		top:100px !important;
	}
	#foot {
		/*background-color:#ebeadd;*/
		width:100vw;
		margin:auto;
	}
	#logos {
		width:100vw;
		margin:auto;
	}

	div#logos-inner {
		width: 100vw;
		height: 100px;
		margin: 0 0;
		vertical-align: middle;
		text-align: center;
	}
	 div#logos-inner img {
		max-height:45px !important;
		margin:.5rem;
	}
}