@font-face {
    font-family: 'Helvetica';
    src: url('Helvetica-Bold.woff2') format('woff2'),
        url('Helvetica-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {background: #5e19a3 url(../images/img-bg.png) center center no-repeat fixed;
    background-size: cover;}
hr {color: #fff;}
.container {margin-top: 50px;}
.donation-form {background-color: #eee; padding: 5% 10%; color: #404041;}
.custom_fields input, .custom_fields select {margin-bottom: 10px;}
#dropin-container {margin-bottom: 10px; margin-top:-25px;}
.subtext h1 {font-family: 'Fira Sans', sans-serif; font-weight: bold; font-size: 27px; color: white; padding-bottom: 20px; border-bottom: 1px solid #888;}
.subtext h3 {font-family: 'Fira Sans', sans-serif; font-size: 19px; color: white; margin-top: 20px; font-weight: normal; line-height: 25px;}
.donation-count {margin-top: 15px; margin-bottom: 15px;}
.donation-count h3 {font-family: 'Kameron', serif; font-weight: normal; font-size: 21px; color: #ffd51a; text-align: left;}
.donation-count .col {/*border: 1px solid #888;*/ padding: 10px 10px 5px 10px;}
.counts {font-weight: bold;}
#logo {margin-bottom: 35px;}
.don-container-text-1 {font-family: 'Helvetica', serif; font-weight: bold; font-size: 16px; color: #a4a4a3; text-transform: uppercase;}
.don-container-text-2 {font-family: 'Helvetica', serif; font-size: 16px; color: #404041; text-transform: uppercase;}
.don-amount-text {font-family: 'Montserrat', sans-serif; font-size: 17px; color: #6d6d6d; font-weight: bold;}
.other-amnt {margin-top: 10px; margin-bottom: 20px;}

#donation_amount_other_radio {position: absolute;clip: rect(0,0,0,0);pointer-events: none;}
#google-pay-button, #apple-pay-button, #venmo-button, #paypal-button, #card-options {display: none;}
.pay-optn-btn {width: 100% !important; height: 45px; margin-bottom: 10px; font-size: 20px; line-height: 20px;}
#apple-pay-button { margin-bottom: 5px;}

#venmo-button {background-image: url("../images/venmo_logo_white.png");  background-repeat: no-repeat; background-position: center; background-color: #3D95CE;background-size: contain; background-origin: content-box; padding: 12px;}
#venmo-button:hover, #venmo-button:active {background-color: #1B74AE; }

.btn-donate {background-color: #330170; color:#fff;}
.btn-amounts {background-color: #330170; color:#fff; font-weight: bold; font-size: 15px}
.btn-amounts.active {background-color: #ffd51a; color:#330170;}
.hosted-field {height: 33px;}
.list-details {
    border-left:1px solid rgba(0,0,0,.125);
    border-right:1px solid rgba(0,0,0,.125);
    padding: 10px 15px;
}
#topHeaderBar {
    width: 100%;
    margin: 0;
    padding: 5px;
    background: #330170;
}
#left-top-bar {
    width: 50%;
    float: left;
}
#right-top-bar {
    width: 50%;
    float: left;
}
.socialIcons {   
float: right;
    margin: 0 10px 0 0;
    padding: 0;

}
#loader {
    display: none;
    position: fixed;
    z-index: 100 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.7);
}

#loader-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #330170;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

[data-braintree-id="choose-a-way-to-pay"] {display: none;}
[data-braintree-id="methods-label"] {display: none;}

@media (max-width: 767.98px) {
    .container {margin-top: 35px; padding:0;}
    .container .row,.container .col, .container .col-md-6  {padding:0;margin:0;}
    #logo {padding: 0 15px;}
    .row.subtext {padding:0 10px; margin-bottom: 15px;}
    .subtext h1 {padding-bottom: 0; border-bottom: none; font-size: 25px;}
    .subtext h3 {margin-top: 20px;font-size: 15px;line-height: 22px;}
    .row.donation-count {margin-bottom: 10px;}
    .row.donation-count h3 {margin-top: .5rem; text-align: center;}
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .pay-optn-btn {height: 35px; font-size: 17px; line-height: 17px;}
    #venmo-button {padding:10px;}
}

@media (max-width: 374px) {
    .pay-optn-btn {height: 35px; font-size: 17px; line-height: 17px;}
    #venmo-button {padding:10px;}
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle
{
    color: #fff;
    background-color: #330170;
    border-color: #330170;
}

.btn-outline-secondary {border-color: #330170;}
.form-control {font-size: 17px; height: 40px;}
.invalid-feedback { margin-bottom: 10px;}

.sharing-box {display: block; margin: 15px 0 10px 0;}
.sharing-box i{vertical-align: top;}
.share-buttons {display: inline-block; margin-right: 20px;}
.share-buttons img {vertical-align: top;}
.share-buttons a {color: #ffd51a;}
.share-buttons a:hover {color: #FFB51A;}
/*.fas{color: lightgrey;!*#ffd51a;*!}*/
/*i.fa-facebook {color: #3B5998; background-color: white; }*/
.thankyou-video {text-align: center;position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;}
.thankyou-video iframe,
.thankyou-video object,
.thankyou-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#review-modal .modal-body, #receipt-modal .modal-body {padding-bottom:0;}
#review-modal .modal-body dl.row, #receipt-modal .modal-body dl.row {margin-bottom:0;}
#review-modal .modal-body dl.row dd ul.list-unstyled, #receipt-modal .modal-body dl.row dd ul.list-unstyled {margin-bottom:0;}