/**
 * Theme Name:       Mai Success
 * Theme URI:        https://bizbudding.com/products/mai-success-theme/
 * Description:      Mai Success child theme for the Genesis Framework.
 * Author:           BizBudding
 * Author URI:       https://bizbudding.com/
 * Version:          3.0.1
 * Text Domain:      mai-success
 * Template:         genesis
 * Template Version: 3.3.2
 * License:          GPL-2.0-or-later
 * License URI:      http://www.gnu.org/licenses/gpl-2.0.html
 */

/* DONORFY STYLING */

.donationStart .donate_step1, .donationStart .donate_columns {position:relative;}
.donationStart .donate_step1:before{content:"1"; position:absolute; left:0; z-index:10; color:#ffffff;font-family:Montserrat; font-weight:800;  z-index:40; font-size: 38px;  top: -15px;  left: -36px;}
.donationStart .donate_step1:after{ content: ""; background: #ee7326; position: absolute; left: -58px; z-index:30;  width: 62px; height: 60px; top: -16px;  transform: rotate(14deg);}
.donationStart .controls ul { text-align: center; margin:80px 0;}
.donationStart .controls li {cursor:pointer; float: none;display: inline; font-weight:600; font-family:Montserrat; font-size:28px;border-radius:8px; padding:16px; margin:12px;  background:#ccd4ef; color:#6a6ec3;}
.donationStart .controls li:hover, .donationStart .donation-options .option p:hover, .donationStart .buttonRow:hover {background:#2bccb2;}
.donationStart .controls li.active {font-weight:800; background:#3255be; color:#ffffff;}
.donationStart .donate_step2 {max-width: 45%; padding:4em 2em; text-align:center;  background: url(/wp-content/themes/mai-success/assets/geometry01.svg) no-repeat; background-size: 100% 100%;}
.donationStart .donationFrame, .donationStart .donate_generate .gen { display: none;}
.donationStart .donationFrame.active, .donationStart .donate_generate .gen.active {display:block!important;} 
.donationStart .donate_columns:before{content:"2"; position:absolute; z-index:10; color:#ffffff;font-family:Montserrat;  z-index:40; font-weight:800; font-size: 38px; top: -11px;  left: -10px;} 
.donationStart .donate_columns:after{content:""; background:#ee7326; position:absolute; left: -30px;  z-index:30; width: 62px; height: 60px; top: -10px;  transform: rotate(-14deg);}
.donationStart .donate_generate { position: absolute; right: 0; top: -70px;  max-width: 45%;}
.donationStart .donation-options {display:flex;justify-content: center;}
.donationStart .donation-options .option p {cursor:pointer; padding: 7px; cursor: pointer;  font-weight: 600; font-family: Montserrat; font-size: 28px;  border-radius: 8px;  padding:7px 16px;  margin:32px 12px;  background: #bfe9d5;  color: #00a857;}
.donationStart .donation-options .option.active p {font-weight:800; background:#3255be; color:#ffffff;}
.donationStart .donate_generate .genImage {text-align:center;}
.donationStart .donate_generate .genImage img { max-width: 490px; width: 100%;}
.donationStart .controls {padding: 0 0 80px 0;}
.donationStart .donate_step2 .controlsRow ul li {list-style-type: none;}
.donationStart .donate_step2 .controlsRow ul {margin:0;}
.donationStart .donate_step2 #customAmount { border-radius: 0;  max-width: 60%;  margin: 0 auto;}
.donationStart .buttonRow {cursor:pointer; padding: 7px; max-width: 60%;  margin: 0 auto; cursor: pointer; position:relative; top:60px;  font-weight: 600; font-family: Montserrat; font-size: 24px;  border-radius: 8px;  padding:7px 16px;  background:#ee7326;  color: #ffffff;}
.donationStart .donate_generate .genCaption h3 { text-align: left; margin: -70px 0 0 0;  display: inline-block;  width: 100%;}
.donationStart .donate_generate .genCaption p { text-align: left; margin: 20px 0 20px 0; display: inline-block;  width: 100%;}
.genCaption { position: relative;  top: -50px;}
.donationStart .donate_columns { padding: 0 0 100px 0;}

.donationForm, .donationForm p, .donationForm label, .donationForm small{color:#2e2f2e;}
.donationForm section .row {overflow:hidden;}
.donationForm section { position: relative;}
.donationForm section.bill {margin:0;}
.donationForm #bill {max-width: 45%; width:100%; float:right; padding:3em 2em 4em 2em; text-align:left;  background: url(/wp-content/themes/mai-success/assets/geometry02.svg) no-repeat; background-size: 100% 100%;}
.donationForm #bill p:first-child {color:#ffffff; background:url("assets/heart.png") no-repeat right center; padding: 1em 6em 1em 0em;}
.donationForm form {padding:60px 0 0 0;}
.donationForm .row.heading{margin:0 0 40px 0; position:relative;}
.donationForm .col-md-6, .donationForm .col-md-4, .donationForm .col-md-12 { padding: 0;}
.donationForm h3 {position:relative; color: #6b6ec4!important; font-size:25px;  font-style:normal; font-weight:800; padding: 0 0 0 65px;}
.donationForm section:nth-child(even) span.numeral:after {transform: rotate(-14deg);}
.donationForm span.numeral:before { position: relative; left:-5px;  font-size: 36.875px;   z-index: 30; color: #ffffff; top: 31px; font-family: 'Montserrat';  font-weight: 800;}
.donationForm span.numeral:after{content: ""; background: #ee7326; position: absolute; left: -24px; z-index:20;  width: 62px; height: 60px; top: 32px;  transform: rotate(14deg);}

.donationForm section.person-details span.numeral:before {content: "1";}
.donationForm section.contact-details span.numeral:before {content: "2";}
.donationForm section.giftaid span.numeral:before {content: "3";}
.donationForm section.about span.numeral:before {content: "4";}
.donationForm section.payment-details span.numeral:before {content: "5";}
.donationForm section.about {margin:0 0 30px 0;}

.donationForm p, .donationForm label, .donationForm i, .donationForm .radiogroup span {color:#000000; font-size:18px;}

.donationForm #bill p { color:#ffffff; font-size:18px; line-height: 22px;}
.donationForm #bill .minor {font-size: 16px; color:#ffffff;}
.donationForm #bill .minor a {color:#ffffff; text-decoration: underline;}
.donationForm .donate-button, .donationForm #submitButton {width: auto;   margin: 0 auto;  cursor: pointer; position: relative; font-weight: 600; font-family: Montserrat; font-size: 24px!important; border-radius: 8px; padding: 7px 16px; background: #ee7326;  color: #ffffff!important; border: 0;}
.donationForm .donate-button:hover, .donationForm #submitButton:hover {background:#2bccb2;}
.donationForm .row { display: block; width: 100%; clear: both; margin:0 0 11px 0;}
.donationForm input, .donationForm textarea, .donationForm select, .inputFix { padding:12px; border-radius:0; width: 90%; height:50px; background:#f7f7f7; border:#d2d2d2 1px solid;  font-size: 1em!important; color: #000000!important; }
.donationForm  input#GiftAid {  margin: 0 6px 7px -22px;height: 15px; width: 15px;}
.donationForm .taggroup input {height: 15px;   width: 15px;}
.donationForm .shortfieldfirst{ width: 100px!important;}
.donationForm .col-md-2 {float:left; width:48%; padding:0px 18px 11px 0;}
.donationForm  .radiogroup .col-md-2 { padding:0px 18px 0px 0;}
.donationForm .radiogroup{padding: 30px 0;} 
.donationForm .col-md-4 {float:left; width:48%;}
.donationForm img.DirectDebitLogo {  margin: 0 0 30px 0;}
.donationForm .expdate input, .donationForm .shortfield { width: 50%!important;}
.donationForm .radiogroup label.error {padding:0!important;}
.donationForm label.error {border-color: #b94a48; box-shadow: none; color: #b94a48; padding: 8px 0 0;     display: block;}
.donationForm .error {box-shadow: none;}
.donationForm label {padding:5px 0; display: inline-block;}
.donationForm .commsgroup input[type=radio], .donationForm input[type=radio] { width: 15px; height:15px; position:relative;top: 1px; margin: 0 7px;}
.donationForm .commsgroup span { width: auto; margin: 0 12px 0 0; display: inline-block;}
.donationForm .newslettergroup input[type=radio] {width: 15px; height:15px; position:relative;top: -1px; margin: 0 7px;}
.donationForm .newslettergroup span { width: auto; margin: 0 12px 0 0; display: inline-block;}
.donationForm .container.contact, .donationForm .container.payment{ margin: 40px auto;}
.donationForm .radiogroup input, .donationForm  .taggroup input { margin: 0 12px 0 0; position: relative; top: -2px;}
.donationForm .taggroup label {width:100%; display:inline-block;}
.donationForm .radiogroup span {margin: 0 12px 0 0;}
.donationForm .container {width:100%!important; padding: 0; overflow: hidden;}
.donationForm .inputFix { padding: 16px 12px 12px 12px;}
.donationForm .container.giftaid, .donationForm .container.payment { border: 3px #000000 solid; padding: 15px;  margin: 15px 0; line-height:20px;}
.donationForm img.giftAidLogo {width: 150px;   margin: 0 30px;} 
.donationForm .container.consent, .donationForm .container.contact {padding:36px 30px 20px 30px; border-radius: 50px; background:#ebebeb;}
.donationForm .grey{background:#ebebeb; padding: 15px;}
.donationForm small { padding: 0 30px; display: block;}
.donationForm .commsgroup { padding: 20px 0 0px; overflow: hidden;}
.donationForm textarea {height:auto;}
.donationForm section.contact-details p {margin: 10px 0 0 0;}

.thanks_image h2 { text-align: left; margin: 50px 0 0 0;  font-size: 20px; display: inline-block;  width: 100%; position: relative; top: -50px;  max-width: 300px;}
.thanks_image p { text-align: left; margin: 20px 0 20px 0; display: inline-block;  width: 100%; position: relative; top: -50px;  max-width: 300px;}
.thanks_image {text-align:center;}
.thanks_image img { max-width: 398px; width: 100%;}

@media (max-width: 970px) {
.donationForm {margin: 0 auto!important; width: 96%;}
.donationForm #bill { max-width: 60%; width: 100%; float:left;}
.donationForm .col-md-4, .donationForm .col-md-6, .donationForm input, .donationForm textarea, .donationForm select {  width: 100%;}
.donationForm .col-md-6, .donationForm .col-md-4, .donationForm .col-md-12 { padding: 0; margin: 0 0 12px 0;}
.donationForm .row { margin: 0;}
.donationForm img.giftAidLogo{  margin: 30px 0!important;}
.donationForm small {  padding: 0; display: block; margin: 0;}
.donationForm .gagroup label { width: 100%;}
.donationStart .donation-options .option p {padding: 7px 10px;    margin: 32px 6px;}
.donationStart .donate_step2 {padding: 3em 1em;}
.donationStart .buttonRow {top:30px;}

}


@media (max-width: 790px) {
	.donationForm .commsgroup div { width: 100%; float: none;}
	.donationForm .commsgroup span { width: 70px;}
	.donationForm label { padding: 0 30px 5px 0;}
	.donationForm .radiogroup span { width: 100%; display: inline-block;}
	.donationForm .container{  width: 100%;}
 .donationForm .expdate input, .donationForm .shortfield {  width: auto!important;}
 .donationForm #bill { max-width: unset;padding: 1em 1em 3em 2em;}
 .donationStart .donate_generate { position: static; right: 0; top: -70px;  max-width: 100%;}
 .donationStart .donate_columns {display:inline;}
 .donationStart .donate_step2 { max-width: 100%; padding: 5em 4em;}
 .donationStart .genCaption { position: relative; top: 0px;  max-width: 60%;  margin: 0 auto;}
 .donationStart .donate_generate .genImage img { max-width: 330px;}
 .donationStart .donate_columns:after {left: 10px; top: 20px;}
 .donationStart .donate_columns:before {top: 19px;  left: 30px;}
 .donationStart .donate_step1 { max-width: 79%; margin: 0 auto;}
 .donationStart { padding: 25px 0 0 0;}
 }

@media (max-width: 530px) {
.donationStart .controls li {display:inline-block;}
.donate_step2 > p { margin: 20px 0 0 0;}
.donationStart .genCaption, .donationStart .donate_step2 #customAmount, .donationStart .buttonRow{max-width: 100%;}
.donationForm .donate-button, .donationForm #submitButton {font-size: 22px;}
.donationStart .donate_step2 { padding: 4em 2em;}
.donationForm img.giftAidLogo, .donationForm img.DirectDebitLogo {float: none; margin: 0px 80% 25px 0px; width: 120px;}
.donationForm #bill p:first-child { color: #ffffff;  background: url(assets/heart.png) no-repeat right center;  padding: 1em 3em 1em 0em;}

.donationStart .controls ul {margin: 10px 0;}
.donationStart .controls { padding: 0 0 0px 0;}
}

@media (max-width: 360px) {
	.donationStart .controls li, .donationStart .donation-options .option p {font-size:18px;}
	.donationStart .donation-options .option p { padding: 7px 7px;  margin: 32px 4px;}
	.donationStart .donate_step2 { padding: 4em 1em;}
}