@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:300,400,600,700,800&display=swap');

:root {
    --main-color: #8a2332;
    --second-color: #f9a639;
}
	.big-donate-form-together2 div {
    flex-grow: 1;
}
		.big-donate-form-together div {
    flex-grow: 1;
}
	.big-donate-form-together2 {
    display: flex;
    padding-bottom: 20px;
		justify-content: space-between;
}
	#big-onetime-recognition{
		width: 100%;
    font-size: 13px;
    outline: 0;
    box-sizing: border-box;
       border: 2px solid #a2a2a2;
    padding: 12px 5px;
    border-radius: 5px;
    transition: border 300ms 450ms linear;
    font-family: open sans condensed;
    /* -webkit-appearance: none; */
    font-weight: 900;
		margin-right:5px;
    background-color: #f5f5f5;
	}
#big-onetime-recognize-name{
	    font-weight: 900;
}
.big-donate-form-recognize-name {
display:none;
flex-grow:0;
	transition:flex-grow .3s;
}
	.big-donate-form-recognize-name.active {
display:block;
		margin-left: 10px;
    flex-grow: 2;
		
}
	
	.big-donate-form-together{
		display: flex;
    padding-bottom: 3px;
		justify-content: space-between;
	}
	
	.big-donate-form-name{
		width: 75%;
	}
	
	.big-donate-form-name input{
		font-weight:900;
	}
	
	#big-onetime-check{
		-webkit-appearance: checkbox !important;
	}
	#big-monthly-renew{
		-webkit-appearance: checkbox !important;
	}

	

.big-donate-entire{
  max-width:1200px;
  min-width:250px;
  margin:10px auto;
	font-family: open sans condensed;
}

.big-donate-type{
  width:100%;
  
  display:flex;
  border: 1px solid #aaaaaa;
  border-radius:5px 5px 0 0;
}
.big-donate-type-option:first-of-type{border-radius:5px 0 0 0;}
.big-donate-type-option:last-of-type{border-radius:0 5px 0 0;
border-left: 1px solid #aaaaaa;
}
.big-donate-type-option{
  flex-grow:1;
  text-align: center;
  white-space:nowrap;
  background-color:#fff;
  color:var(--main-color);
  text-transform:uppercase;
  font-family:open sans condensed;
  font-weight:900;
  padding: 5px 10px;
  letter-spacing:0px;
  cursor:pointer;
  transition:letter-spacing .2s, background-color .2s, color .2s;
}
.big-donate-type-option:hover{
  background-color:var(--second-color);
    letter-spacing:1px;
  color:#fff;
}
.big-donate-type-option.active{
  background-color:var(--main-color);
  letter-spacing:2px;
  color:#fff;
}
.big-donate-container{
  padding-top:0;
	background-color: #ffffff;
    color: #5c5c5c;
}
.big-donate-form{
   display:none;
}
.big-donate-form-innercontain{
  border: 1px solid #aaaaaa;
  border-radius:0 0 5px 5px;
  padding:20px;
}
.big-donate-form-title{
  font-size:18px;
  padding:7px;
  text-align:center;
  font-weight:900;
  background-color:#f1f1f1;
  border-radius:0;
  border:1px solid #aaaaaa;
  border-bottom:none;
}
.big-donate-form-amount{
  
}

.big-donate-form-submit{
  font-size:20px;
  font-weight:900;
  background-color:var(--second-color);
  padding:10px;
  text-align:center;
  color:#fff;
  opacity:1;
  border-radius:0 0 5px 5px;
  cursor:pointer;
  margin-top:0px;
  text-transform:uppercase;
  letter-spacing:0px;
  transition:background-color .2s, letter-spacing .2s, opacity .2s;
}
.big-donate-form-submit:hover{
  letter-spacing:1px;
  background-color:var(--second-color);
}
.big-donate-form-submit.disabled{
  pointer-events:none;
  opacity:.7;
}
/* 
.big-donate-form-benefit-container{
  display:-webkit-inline-box;
  width:100%;
  overflow:hidden;
  overflow-x:auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  
}
.big-donate-form-benefit{
  display:flex;
  flex-direction:column;
  padding-top:10px;
  text-align:center;
  width:100%;
   scroll-snap-align: center;
    margin:10px 2.5% 10px 2.5%;
  border: #ececec solid 1px;
  align-items:center;
  background-color:#fff;
  border-radius:5px;
}

.big-donate-form-benefit-container::-webkit-scrollbar {
  width: 20px;
  margin:0 20px;
  display:none;
}
 */
.big-donate-form.active{
  opacity:1;
  pointer-events:auto;
  position:relative;
  display:block;
}
.big-donate-form{
  opacity:0;
  pointer-events:none;
    position:absolute;
}

.big-donate-form-benefit{
  display:none;
  flex-direction:column;
  padding-top:10px;
  text-align:center;
position:relative;
   scroll-snap-align: center;
    margin:0;
      border: none;
  align-items:center;
  background-color:#fff;
	transition: border .2s, margin .2s;

}
	
	.big-donate-form-benefit::after{
		    content: "+";
    position: absolute;
    z-index: 10;
    top: -9px;
    font-size: 20px;
    color: #000000;
    font-weight: 900;
	}
	.big-donate-form-benefit:first-of-type::after{
		content:"";
	
	}
		.big-donate-form-benefit.active::after{
		content:"";
	
	}
.big-donate-form-onetime .big-donate-form-benefit:first-of-type{
  border-radius:5px 0 0 0;
}
.big-donate-form-onetime .big-donate-form-benefit:last-of-type{
  border-radius:0 0 0 5px;
}
.big-donation-info-area{
  display:none;

}
#big-onetime-input{
  border-radius:5px 5px 0 0;
}
#big-monthly-input{
  background-color:#cecece;
  pointer-events:none;
  border:2px solid #aaaaaa;
  border-radius:5px 5px 0 0;
}

.big-donation-info-area.enabled{
  display:block;

}
.big-donate-form-benefit.enabled{
  display:flex;
}
.big-donate-form-benefit.active{
 width:100%;
}
/* width */
.big-donate-form-benefit-container::-webkit-scrollbar {
  width: 20px;
  margin:0 20px;
  display:none;
}

.big-donate-form-benefit-reason{
  text-align:center;
      width: 100%;
}

.big-donate-form-benefit-reason-text{
  font-size:15px;
  width:100%;
  background-color:#f3f3f3;
  
}
.big-donate-form-benefit-reason-text li{
      border-top: 1px solid #cbcbcb;
  padding:10px;
}
.big-donate-form-benefit-reason-text ul{
      padding-inline-start: 0px;
     list-style:none !important;
      margin-block-start: 5px;
    margin-block-end: 0px;
	    margin-left: 0px;
    margin-bottom: 0px;
}
.big-donate-form-benefit-reason-text ul li{

     list-style:none !important;

}



.big-donate-inform{
  text-align:center;
  font-weight:900;
  padding:25px 0 2px 0;
  font-size: 12px;
	border-bottom: 1px solid #1c1c1c;
    text-transform: uppercase;
}

.big-donate-form-benefit-icon{
 display: flex;
    justify-content: center;
    /* flex-grow: 1; */
    align-items: center;
  padding-bottom:10px;
  cursor:pointer;
  width:100%;


}
.big-donate-form-benefit-icon img{
  height:20px !important;
	margin-bottom:0 !important;
  padding-right:10px;
  transition:height .3s;
}
.big-donate-form-benefit-reason-header{
  font-weight:900;
  text-transform:uppercase;
  font-size:16px;
}
.big-donate-form-benefit{
  max-height:40px;
  overflow:hidden;
	background-color:transparent;
  opacity:.7;
  transition:max-height .3s, opacity .3s;
}
.big-donate-form-benefit.enabled{
  opacity:1;
}
.big-donate-form-benefit.active{
  opacity:1;
  max-height:350px;
	background-color:#fff;
	    border-radius: 5px;
    margin: 5px 0;
	border: #aaaaaa solid 1px; 
}
.big-donate-form-benefit.active .big-donate-form-benefit-reason-header{  font-size:22px;}
.big-donate-form-benefit.active .big-donate-form-benefit-icon img{
  height:35px !important;
  padding-right:10px;
}


label {
  letter-spacing: 0.05em;
  display: block;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 9px;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
}

.input-wrapper.currency:before {
  content: "$";
  pointer-events: none;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1px;
  width: 35px;
  left:10px;
  bottom: 1px;
  border-radius: 5px 0 0 5px;
  font-weight:900;
}
.input-wrapper.currency:after {
  content: "USD";
  pointer-events: none;
  font-size: 18px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight:900;
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 5px 0 0 5px;
  width: 40px;
  right:10px;
}

.input-wrapper.currency.monthly:after {
  content: "/month";
  pointer-events: none;
  font-size: 18px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight:900;
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 5px 0 0 5px;
  width: 40px;
  right:30px;
}

.input-wrapper.currency input {
  padding-left: 40px;
    font-weight:900;
  font-family:open sans condensed;
  font-size:25px;
  line-height:20px;
}

.input-wrapper > input {
  width: 100%;
  font-size: 16px;
  outline: 0;
  box-sizing:border-box;
      border: 2px solid #a2a2a2;
  padding: 10px 10px;
  border-radius: 5px;
  transition: border 300ms 450ms linear;
  -webkit-appearance: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

.big-donate-form-benefit:first-of-type::after{
	content:"";
}

.big-donate-monthly-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
  width:calc(100% + 10px);
}
.big-donate-monthly-button{
  padding:5px 10px;
  background-color:#ececec;
  border-radius:5px;
  cursor:pointer;
  font-weight:900;
  min-width:13%;
  margin:5px 5px 0px 0;
  border: 1px solid #aaaaaa;
  font-size:14px;
  flex-grow:1;
  line-height:28px;
  text-align:center;
  transition: font-size .3s, background-color .3s, flex-grow .3s;
}
.big-donate-monthly-button:hover{
  font-size:22px;
  background-color:var(--second-color);
}
.big-donate-monthly-button span{
  font-size:12px;
}
.big-donate-monthly-button.active{
  font-size:22px;
  background-color:var(--main-color);
  color:#fff;
  flex-grow:2;
}



.big-donate-form-benefit .big-donate-form-benefit-reason-header{
	display:block;
}
.big-donate-form-benefit.active .big-donate-form-benefit-reason-header{
	display:block;
}

.big-donate-form-benefit-container{
	padding-bottom:4px;
	border-bottom: 1px solid #1c1c1c;
		margin-bottom:4px;
}
