:root{

    --standout: #faeb00;

    --highlight: #0072bc;

    --default: rgb(101, 114, 135);

    --white-smoke: #f4f4f4;

}

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /* outline: 1px dotted rgb(225, 13, 3); */

}

html {

    font-family: system-ui, -apple-system, BstandoutMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    font-size: 100%;

    scroll-behavior: smooth;

    line-height: 1.6;

}

a {

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}

img {

    max-width: 100%;

    height: auto;

    vertical-align: middle;

}

abbr {

    text-decoration: none;

}

svg {

    max-width: 100%;

    height: auto;

    display: block;

}

button, input[type*="button"], input[type*="submit"], *[role*="switch"] {

    cursor: pointer;

}

input:disabled {

    opacity: 0.5;

}

.darkmode input:disabled {

    opacity: 0.1;

}

input:read-only {

    user-select: none;

}

*[role*="presentation"] {

    user-select: none;

    cursor: none;

}

input, button {

    font-family: inherit;

}

:checked {

    accent-color: rgb(0, 159, 219);

}

*:focus-visible {

    outline: thin solid rgb(52 176 224);

}

font {

    vertical-align: baseline !important;

}

body {

    background-color: rgb(255, 255, 255);

    color: rgb(0, 0 , 0);

}

@media screen and (min-width: 1200px) {

    main, footer, header {

        max-width: 1390px;

        margin: 0 auto;

    }

}

header {

    position: sticky;

    top: 0;

    background-color: rgb(255, 255, 255);

    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, .09);

    z-index: 2;

}

.navbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1.2em 1em;

    gap: 2.5em;

}

.nav_list {

    display: flex;

    align-items: center;

    justify-content: space-between;

    /* gap: clamp(0.5em, 2.5em, 2.5em); */

    list-style-type: none;

}

.logo {

    min-width: 7em;

}

.logo img {

    object-fit: cover;

    max-height: 2.5em;

}

@media screen and (max-width: 767px) {

    .navList_item {

        padding: 0.5em 0 !important;

        /* border: none !important; */

    }

    .navList_item.secured {

        display: none !important;

    }

    .nav_list .sep {

        display: none;

    }

}

.sep::after {

    content: "";

    display: block;

    height: 1.2em;

    width: 1px;

    margin: 0 1.25em;

    border-left: 1px solid #a7a7a7;

}

.navList_item {

    display: flex;

    align-items: center;

    gap: clamp(0.5em, 1em, 2em);

    padding: 0.5em 1em;

    /* padding: 0.5em 1em 0.5em 2em; */

    /* border-left: 1px solid #a7a7a7; */

}

.navList_item.secured {

    border: none;

    /* margin-right: 2.5em; */

}

.navList_item .gtranslate_wrapper select {

    border: none;

    font-family: inherit;

    font-size: 0.8rem;

    width: 100%;

}

footer .icon_bar {

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: center;

    gap: 1.5em;

    padding: 1.5em 1em;

    background-color: var(--white-smoke);

}

.icon_bar .sep::after {

    margin: 0;

    height: 2em;

}

.iconBar_item img {

    max-width: 6em;

    height: 2.5em;

    object-fit: contain;

}

.footer_box {

    background-color: rgb(0, 0 , 0);

    color: rgb(255, 255, 255);

    padding: 2.5em 1em 6em;

}

.footer_box .navbar {

    padding-left: 0;

    padding-right: 0;

    margin-bottom: 4em;

}

.footer_box .navbar .nav_list {

    justify-content: center;

    gap: 1em;

    flex-wrap: wrap;

    font-weight: 500;

}

.footer_box .navList_item {

    border-inline-end: 1px solid #a7a7a7;

    padding: 0;

    padding-inline-end: 1em;

}

.footer_box .navList_item:last-child {

    border: none;

}

main {
    padding: 2em 1em;

}

/* Index ~ Content */

@media screen and (max-width: 767px) {
 
    .grid_con {

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;

    }

    .grid_box:nth-child(2) {

        order: 1 !important;

    }

    .grid_box:nth-child(1) {

        order: 2 !important;

    }

    .grid_box:nth-child(4) {

        order: 3 !important;

    }

    .grid_box:nth-child(3) {

        order: 4 !important;

    }

}

.grid_con {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 2em;

}

@media screen and (max-width: 424px) {

    .donate_cart {

        padding: 2em 1em !important;

    }
    
}

.donate_cart {

    background-color: var(--highlight);

    color: rgb(255, 255, 255);

    height: 100%;

    padding: 2em 2.5em;

}

.donate_tab {

    display: flex;

    background-color: var(--white-smoke);

    color: rgb(0, 0 , 0);

    font-weight: 600;

    font-size: 1rem;

    border-radius: 0.5em;

    overflow: hidden;

}

.donate_displ {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2em;

    margin: 1.5em 0;

}

.donate_tab > * {

    width: 50%;

    padding: 0.55em 1em;

    text-align: center;

    transition: all 0.2s;

}

.donate_tab > .active {

    background-color: var(--standout);

    box-shadow: 0px 7px 29px 0px rgba(0, 61, 101, 0.71);

}

.donate_field {

    background-color: rgb(255, 255, 255);

    border: none;

    outline: none;

    border: 1px solid rgb(255, 255, 255);

    border-radius: 0.25em;

    font-size: 1rem;

    margin: 1em 0;

    padding: 0.35em 0.5em;

}

.donate_field:focus {

    border: 1px solid var(--standout);

}

.txtBox p {

    margin: 1.25em 0;

    line-height: 1.7;

}

.highlight_box {

    color: var(--highlight);

    background-color: rgb(204, 227, 242);

    padding: 1em;

}

.highlight_box.v2 {

    border: 1px solid rgb(226, 226, 226);

    border-inline-start: 5px solid var(--highlight);

    color: rgb(0, 0 , 0);

    background-color: rgb(255, 255, 255);

    border-radius: 0.2em;

}

.highlight_box p {

    margin: 0;

}

.highlight {

    color: var(--highlight);

}

.payGrid {

    display: flex;

    align-self: center;

    justify-content: center;

    gap: 1em;

    flex-flow: row wrap;

    width: 100%;

    padding: 2em 0;

}

.payGrid_item {

    background-color: var(--white-smoke);

    border-radius: 0.25em;

    color: rgb(0, 0 , 0);

    padding: 0.75em;

    position: relative;

    cursor: pointer;

    display: flex;

    justify-content: center;

    font-weight: 700;

    user-select: none;

    min-width: 7em;

    width: 100%;

    max-width: 12em;

}

.payGrid_item.radio input {

    display: none;

}

.payGrid_item.selected {

    background-color: var(--standout);

}

/*  */

button {

    border: none;

    outline: none;

    min-width: 100%;

    padding: 0.5em;

    font-size: 1rem;

    font-weight: bold;

    border-radius: 0.25em;

}

.form_box button {

    background-color: var(--highlight);

    color: white;

}

.form_box {

    margin: 1em 0;

}

.form_box.standout button {

    background-color: var(--standout);

    color: black;

    line-height: 2.2;

    font-size: 1.2rem;

}

/* Popup */

.popup_window {

    position: fixed;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    z-index: 10000000;

    background-color: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(7px);

    height: 100vh;

}

.popup_con {

    display: flex;

    justify-content: center;

    padding: 0.5em;

    height: 100vh;

}

.popup_box::-webkit-scrollbar {

    width: 0.5em;

    height: 0.5em;

}

.popup_box::-webkit-scrollbar-thumb {

    background-color: rgba(20, 24, 31, 0.12);

    border-radius: inherit;

}

.popup_box {

    background-color: rgb(255, 255, 255);

    border-radius: 0.75em;

    max-width: 32em;

    max-height: calc(100vh - 1em);

    overflow: auto;

    position: relative;

    margin: auto;

    width: 100%;

    color: black;

}

.popup_box > * {

    padding: 1em 2em;

}

.popup_box .modal_box {

    display: flex;

    flex-direction: column;

    gap: 1em;

    padding: 1.5em 2em 0;

}

.popup_box > *:last-child {

    padding-bottom: 2.5em;

}

.modal_box .txbox > div {

    display: flex;

    gap: 0.5em;

    font-size: 1.02rem;

    margin: 0.8em 0;

}

.radial_icon {

    background-color: rgba(241, 241, 241, 0.1);

    border-radius: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 1.8em;

    height: 1.8em;

}

#proof-displ {

    width: 100%;

    padding: 0.5em;

}

#proof-displ img {

    width: inherit;

    max-height: 15em;

    object-fit: cover;

}

#qr-displ img:not([src='']) {

    width: 15em;

    height: 15em;

    object-fit: contain;

}

/* Page: Pay */

.form_con {

    border: 1px solid black;

    border-radius: 0.5em;

    background-color: white;

    flex: 1 1 auto;

}

.form_con > * {

    padding: 1em 1.5em;

}

.form_title {

    font-family: var(--subFont);

    font-style: italic;

    font-size: 1.35rem;

    font-weight: 500;

    border-bottom: var(--pg-borderE);

}

.form_con form {

    padding-top: 2em;

}

.form_item {

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    padding-bottom: 1.2em;

    gap: 0.4em;
    
}

@media screen and (min-width: 768px) {

    .form_item.db {

        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    }
    
}

.form_item.db {

    display: grid;

    gap: 0.4em 1em;

}

.form_field, .form_fieldS7, .form_btn {

    width: 100%;

    flex: 1 1 auto;

    border-radius: 0.5em;

    border: none;

    padding: 1em 0.75em;

    font-size: 0.875rem;

    transition: all 1.2s ease 0s;

    outline: none;
    
}

.form_item.mltpl .form_field {

    text-align: center;

    font-size: 1rem;

    padding: 0.3em;

    height: 3rem;

}

.form_field {

    border: 1px solid black;
    
    background-color: rgba(255, 255, 255, 0.5);

    color: black;

}

.form_btn {

    text-transform: uppercase;

    background-color: var(--highlight);

    color: white;

}

@media screen and (max-width: 696px) {

    .pay_con {

        gap: 1.2em !important;

    }

    .pay_box {

        order: 2;

    }

    .pay_box.pay_options {

        order: 1;

    }

    .payOptions_con {

        flex-flow: row wrap !important;

    }

    .pay_option {

        padding: 0.5em !important;

    }

}

@media screen and (max-width: 37.5em) {

    .pay_con {

        padding: 2em 1em !important;

    }

}

.pay_con {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2em;

    align-items: start;

    justify-content: center;

    padding: 2em;

}

.pay_box {

    padding: 1.2em;

    background-color: rgba(225, 225, 225, 0.25);

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    border-radius: 0.8em;

    color: black;

}

.payBox_header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid black;

}

.payBox_header, .payBox_main {

    padding: 0.8em 0.5em;

}

.pBH_item {

    display: flex;

    flex-direction: column;

    /* gap: 0.25em; */

}

.pBH_item .logo {

    width: 4.5em;

}

.pBH_item p {

    text-align: right;

    max-width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.pBH_item .price {

    font-size: 1.2rem;

    font-weight: 600;

}

.pay_box.pay_options {

    /* background-color: rgb(254, 249, 236); */

    border: none;

    border-radius: 0.5em;

    padding: 2em;

}

.payBox_con .title {

    text-transform: uppercase;

    text-align: center;

    font-size: 0.8rem;

    padding: 1em;

}

.payOptions_con {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 1em;

}

.pay_option {

    padding: 1em;

    display: flex;

    align-items: center;

    border-radius: 0.5em;

    cursor: pointer;

}

.pay_option:hover {

    background-color: rgba(20, 20, 20, 0.2);

}

.pay_option.active {

    background-color: var(--highlight);

    color: white;

}

.form_field.pseudo {

    padding: 0;

    display: flex;

    align-items: center;

    gap: 0.5em;

}

.form_field.pseudo input {

    padding: 1em 0.75em;

    background-color: transparent;

    width: 100%;

    border: none;

    outline: none;

    font-size: 0.875rem;

    color: black;

    text-overflow: ellipsis;

}

.form_field.pseudo > *:first-child:not(input) {

    margin-inline-start: 0.25em;

}

.form_field.pseudo > *:last-child:not(input) {

    margin-inline-end: 0.25em;

}

.form_field.pseudo .icon {

    min-width: 1.3em;

    width: 3em;

    /* margin: auto 0.3em; */

}

.equivAmt {

    font-size: 0.8rem;

    font-style: italic;

}

.ntwrk_info {

    display: inline-block;

    margin-inline-start: auto;

    font-size: 0.8rem;

    font-style: italic;

}

.address_copy {

    display: flex;

    align-items: center;

    background-color: rgb(230, 233, 237);

    border: none;

    outline: none;

    border-radius: 0.5em;

    padding: 0.1em 0.5em;

    font-size: 0.6rem;

    text-transform: uppercase;

    width: 5em;

    cursor: pointer;

}

.address_copy:active {

    background-color: #0058d3;

}

.address_copy .icon svg path {

    stroke: currentColor;

}

.form_field.pseudo .address_copy {

    background-color: transparent;
    
    padding: 0.3em;
    
    border: none;
    
    outline: none;
    
    display: flex;
    
    align-items: center;

    font-size: 0.8rem;

}

* .address_copy.copied {

    color: rgb(23, 191, 99) !important;

}

.payAcc_details {

    display: flex;

    flex-direction: column;

    gap: 1em;

    padding: 2em;

    margin: 0.5em 0;

    background-color: white;

    border: 1px solid var(--default);

}

.accDetail_item {

    display: flex;

    align-items: flex-end;

    gap: 1.2em;

    padding: 1em;

}

.accDetail_item .title {
    
    font-size: 0.8rem;

    text-transform: uppercase;

    padding: 0.5em;

}

.accDetail_item .desc {

    font-size: 1.2rem;

    font-weight: 600;

    padding: 0 0.5em;

}

.form_item.v2 {

    flex-wrap: nowrap;
    
    padding: 0;

    width: 100%;

}

.form_item.v2 .form_field.pseudo {

    width: 100%;

    justify-content: space-between;

}

.label {

    font-size: 0.625rem;

    /* padding: 0.5em 0.3em; */

    padding: 0.2em 0.3em;

    margin: 0.15em;

    white-space: nowrap;

    font-weight: 700;

    border-radius: 0.25em;

    text-transform: uppercase;

    color: white;

    background-color: black;

}

.optBtn_box .opt_btn {

    background-color: black;

    padding: 0.8em 0.5em;

    border-radius: 0.5em;

    display: flex;

    align-items: center;

    justify-content: center;

}

.opt_btn.light {

    background: white;
    
    border: 1px solid;
    
}

.optBtn_box .opt_btn img {

    height: 1.5em;

    object-fit: cover;

}

.optBtn_box .opt_btn.apple img {

    min-width: 3.5em;

}

.optBtn_box .paypal {

    background-color: #ffc439;

}

.opt_btn:active {

    box-shadow: rgb(6, 44, 110) 0px 0px 0px 2px inset, rgb(255, 255, 255) 0px 0px 0px 4px inset;

}

.opt_btn [type="radio"] {

    display: none;

}

.exx {

    padding: 0.3em;

    display: flex;

    align-items: center;

    gap: 0.5em;

}

.exx::after, .exx::before {

    content: "";

    width: 100%;

    border-bottom: 1px solid rgb(101, 114, 135);

}

.exp-time {

    margin: auto;

    font-size: 0.7rem;

    cursor: none;

    background-color: var(--highlight);

}

.security_device {

    display: flex;
    
    align-items: center;
    
    gap: 0.5em;

    margin: auto; 
    
    padding: 0.5em;
    
    user-select: none;

    background-color: rgb(0, 159, 219);
    
    border-radius: 0.3em;
    
    font-size: 0.77rem;
    
    width: fit-content;
    
    font-family: monospace; 
    
    /* color: rgb(0, 93, 166); */

}

.security_device img {

    max-width: 4.5em;

}

.error_mode {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    text-align: center;

    gap: 1.2em;

    padding: 2em;

    min-height: 30em;

}

.error_mode .title {

    font-size: 1.25rem;

    font-weight: 500;

    color: red;

}

.error_mode img {

    height: 12.5em;

    object-fit: contain;

    margin: 1.2em 0;

}


/* PRELOADER */

#preloader, #screen {

    backdrop-filter: blur(10px);

    background-color: rgba(255, 255, 255, 0.2);

    color: rgb(23, 191, 99);

    min-height: 100vh;

    display: flex;

    flex-flow: column nowrap;

    justify-content: center;

    align-items: center; 

    text-align: center;

    overflow: hidden;

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

    user-select: none;

    cursor: progress;

    opacity: 1;

    transition: opacity 0.5s ease;

    z-index: 100000000000000000000000000000;
}


.spinner {

    border: 3px solid;

    border-color: rgb(0, 88, 211);

    border-bottom-color: rgba(0, 88, 211, 0.75);

    border-top-color: rgba(0, 88, 211, 0.5);

    border-radius: 100%;

    width: 4.5em;

    height: 4.5em;

    animation-name: rotate;

    animation-duration: 0.5s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

.spinner.sm {

    width: 1.25em;

    height: 1.25em;

}

.pr_box {

    margin-top: auto;

}

.pr_url {

    font-size: 1.5rem;

    animation-name: slide-in;

    animation-duration: 1700ms;

    transition: 0.3s;

}

#preloader .pr_status {

    padding: 2em;

    border-top: 1px solid rgb(120, 120, 120);

    margin-top: auto;
    
    width: 100vw;

}

.ellipsis {

    display: inline-block;

    vertical-align: bottom;

    overflow: hidden;

    animation-name: loading;

    animation-duration: 2.5s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

}

/* Feedback Page */

.feedback_con {

    position: fixed;
    
    top: 0;
    
    left: 0;
    
    right: 0;
    
    bottom: 0;
    
    display: flex;
    
    flex-direction: column;
    
    justify-content: center;
    
    align-items: center;
     
    gap: 1em;

}

.feedback_con > div {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.animate-img {

    animation: 2.3s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) 0s 3 normal none running JumpPulse;

}

.animate-img.shake {

    animation: 2.5s ease 0s 3 normal none running shake;

}

.animate-img svg {

    min-width: 2.5em;

}

/* ANIMATIONS */

@keyframes loading {

    from {

        width: 0;

    }

    to {

        width: 2ch;

    }
}

@keyframes rotate {

    0% {

        transform: rotate(0deg);

    }
    
    100% {

        transform: rotate(1turn);

    }
}

@keyframes JumpPulse {

    0% {

        opacity: 0;

        transform: translate(0px, 100%)

    }

    70% {

        transform: translate(0px, -10px) rotate(-5deg);

    }

    100% {

        opacity: 1;

        transform: translate(0px, 0) rotate(-5deg);

    }

}

@keyframes shake {

    0% {

        transform: translateX(0);

    }

    25% {

        transform: translateX(-10px) rotate(-5deg);

    }

    50% {

        transform: translateX(10px) rotate(5deg);

    }

    75% {

        transform: translateX(-10px) rotate(-5deg);

    }

    100% {

        transform: translateX(0);

    }

}

/* ELEMENT OVERRIDE */

.n_displ {

    display: none !important;

}

.iQ_panelSwitch {

    user-select: none;

    cursor: pointer;

}