.modal_window_inner { border: 0px solid yellow; overflow-x: hidden; height: 100%; } .modal_window_outer { height: 100%; } .modal_window_outer.donate { padding: 200px 0px; } .donate .modal_window_inner { width: 100%; max-width: 1152px; } .donate_modal_inner { position: relative; display: flex; width: 100%; height: 100%; border: 0px solid red; align-self: center; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; } .donate_modal_inner_t { position: relative; display: table; width: 100%; height: 100%; border: 0px solid red; } .donate_modal_inner_tr { display: table-row; min-height: 100%; } .donate_modal_inner_td { display: table-cell; vertical-align: middle; } .donate__stage { position: relative; display: block; width: 100%; border: 0px solid red; text-align: center; line-height: 0px; font-size: 0px; padding-bottom: 80px; transition: all 1.5s; } .form__breaker { position: relative; display: block; width: 100%; height: 0px; } .form__field__group { position: relative; display: block; width: 100%; padding-bottom: 48px; max-height: auto; opacity: 1; transition: all 1s; overflow: hidden; } .form__field__group--hidden { max-height: 0px; opacity: 0; transition: all 1s; overflow: hidden; padding: 0px; } .form__field { position: relative; display: block; text-align: center; color: #F8F7F1; font-size: 18px; line-height: 30px; padding-bottom: 48px; max-height: 200px; opacity: 1; transition: all 1.5s; overflow: hidden; } .form__field--checkbox { position: relative; display: inline-block; vertical-align: top; font-size: 20px; line-height: 12px; } .form__field--radio { position: relative; display: inline-block; vertical-align: top; font-size: 24px; line-height: 24px; } .form__field--submit { margin-top: 48px; } .form__field--open { max-height: 1000px; } .form__field--card_details { max-height: none; opacity: 1; transition: all 1.5s; display: inline-block; width: 60%; padding: 0px 16px 48px; } .form__field--hidden { max-height: 0px; opacity: 0; transition: all 1.5s; padding-bottom: 0px; } .form__field--low-pad { padding-bottom: 8px; } .form__field--no-pad { padding-bottom: 0px; } .form__field--half-width { display: inline-block; width: 50%; padding: 0px 16px 24px; } .form__field--half-width .form__field__input { width: 100%; margin: 0px 0px; } .radio__each__outer { display: inline-block; margin: 0px 16px; font-size: 40px; line-height: 40px; } .radio__each__outer--other { margin-right: 4px; } .checkbox__each__outer { display: inline-block; margin: 0px 24px; font-size: 40px; line-height: 40px; } .radio__label { display: inline-block; vertical-align: top; font-size: 48px; line-height: 40px; margin-right: 10px; } .checkbox__label { display: inline-block; vertical-align: top; font-size: 21px; line-height: 40px; margin-right: 10px; } .checkbox__label a { color: #EC1C99; } .checkbox__label a:hover { color: #FFFFFF; } .form__field__title a { color: #EC1C99; } .form__field__title a:hover { color: #FFFFFF; } .form__field__title { position: relative; display: block; font-family: 'VAGRoundedNext-Bold'; width: 100%; font-size: 44px; line-height: 44px; padding-bottom: 8px; } .form__field__notes { position: relative; display: block; font-size: 24px; line-height: 24px; } .form__field--checkbox .form__field__notes { font-size: 24px; line-height: 24px; } .form__field--submit .form__field__notes { font-size: 14px; line-height: 18px; padding-top: 6px; } .form__field__input__outer { position: relative; display: inline-block; border: 4px solid transparent; padding: 2px; margin-top: 8px; } .form__field--checkbox .form__field__input__outer { margin-top: 4px; } .form__field--radio .form__field__input__outer { margin-top: 4px; } .form__field__input__outer--focus { border: 4px solid #6bbc46; outline: 0; } .form__field__input { position: relative; display: block; width: 100%; border: 2px solid #15601a; text-align: center !important; font-size: 18px; line-height: 30px; padding: 16px; color: #cccccc; } .form__field__input::placeholder { color: #15601a; font-style: italic; opacity: 1; } input:focus::placeholder { opacity: 0; } textarea:focus::placeholder { opacity: 0; } input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */ *:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */ *:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */ *:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */ *:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */ *:focus::placeholder { opacity: 0; } /* Modern Browsers */ .form__field__error { position: relative; display: block; width: 100%; color: #ed1c24; visibility: hidden; } .form__field--error .form__field__error { visibility: visible; } .form__field--error .form__field__input { border: 2px solid #ed1c24; color: #ed1c24; } .form__field--error .form__field__input::placeholder { color: #ed1c24; } .form__field__input { position: relative; display: inline-block; width: 50%; font-family: 'VAGRoundedNext-Regular', sans-serif; color: #cccccc; font-size: 32px; line-height: 36px; padding: 3px 0px 3px; border: 0px; background-color: #f8f7f0; text-align: center; -webkit-appearance: none; opacity: 1; margin: 0px 24px; } .form__field__input::placeholder { color: #cccccc; } .form__field__input--amount-other { position: relative; display: inline-block; width: 160px; font-family: 'VAGRoundedNext-Regular', sans-serif; color: #cccccc; font-size: 36px; line-height: 36px; padding: 3px 0px 1px; border: 0px; background-color: #f8f7f0; text-align: center; -webkit-appearance: none; opacity: 1; margin: 0px 24px 0px 4px; } .form__field__input--amount-other::placeholder { color: #cccccc; } .form__field--checkbox input[type="checkbox"] { display: none; } .form__field--checkbox label { cursor: pointer; display: inline-block; } .form__field--checkbox input[type="checkbox"] + label::after { border: 2px solid #F8F7F1; content: " "; display: inline-block; vertical-align: top; height: 36px; padding: 0; font-size: 48px; line-height: 30px; width: 36px; border-radius: 5px; color: #F8F7F1; text-align: center; } .form__field--checkbox input[type="checkbox"]:checked + label::after { content: "\2714"; } .form__field--radio input[type="radio"] { display: none; } .form__field--radio label { cursor: pointer; display: inline-block; } .form__field--radio input[type="radio"] + label::after { border: 2px solid #F8F7F1; content: " "; display: inline-block; vertical-align: top; height: 36px; padding: 0; font-size: 48px; line-height: 30px; width: 36px; border-radius: 5px; color: #F8F7F1; text-align: center; } .form__field--radio input[type="radio"]:checked + label::after { content: "\2714"; } .form__submit__button { pointer-events: none; opacity: 0.5; position: relative; display: block; width: 100%; -webkit-appearance: none; border: 2px solid #15601a; background-color: #15601a; text-align: center; font-size: 18px; line-height: 30px; padding: 16px; color: #e8fdc9; text-transform: uppercase; font-family: "futura-pt-bold", sans-serif; font-weight: 700; text-decoration: underline; outline: 0; } .form__submit__button--valid { opacity: 1; pointer-events: auto; } .form__submit__button::-moz-focus-inner { border: 0; } .form__field--occurances { max-height: 0px; opacity: 0; transition: all 0.5s; overflow: hidden; padding-bottom: 0px; } .form__field--occurances--show { max-height: 300px; padding-bottom: 48px; opacity: 1; transition: all 1s; } .occurances_title_type { display: none; } .occurances_title_type--show { display: inline; } .form__field--gift-aid { max-height: 0px; opacity: 0; transition: all 1s; overflow: hidden; padding-bottom: 0px; } .form__field--gift-aid--show { max-height: 300px; padding-bottom: 48px; opacity: 1; transition: all 1s; } .form__field--address { max-height: 60px; opacity: 1; transition: all 1s; overflow: hidden; padding-bottom: 16px; } .form__field--address--show { max-height: 60px; padding-bottom: 16px; opacity: 1; transition: all 1s; } .form__field--reason { padding-bottom: 48px; } .form__field--other-reason { max-height: 0px; opacity: 0; transition: all 1s; overflow: hidden; padding-bottom: 0px; } .form__field--other-reason--show { max-height: 180px; padding-bottom: 48px; opacity: 1; transition: all 1s; } .form__field__giftaid_logo { display: inline-block; fill: #F8F7F1; vertical-align: top; margin: 0px 24px; width: 200px; } .form__field__small_print { font-size: 14px; line-height: 21px; } .form__field__small_print p { padding-bottom: 8px; } .giftaid_amount { font-family: 'VAGRoundedNext-Bold'; } .form__field--country { width: 100%; margin-bottom: 0px; position: relative; z-index: 210; border: 0px solid red; } .form__field__dropdown__outer { min-height: 42px; position: relative; display: inline-block; vertical-align: top; border: 0px solid #F8F7F1; width: calc(50% - 46px); margin: 0px 2px; background-color: #F8F7F1; z-index: 710; transition: all 1s; } .form__field__dropdown__outer--wide { width: calc(80% - 50px); text-align: left; padding: 0px; } .form__field__dropdown__outer--closed { height: 42px; min-height: 42px; } .form__field__dropdown__outer--open { height: auto; min-height: 42px; } .form__field__dropdown__outer--hidden { max-height: 0px; opacity: 0; transition: all 1s; overflow: hidden; } .form__field__dropdown__outer--show { max-height: 300px; opacity: 1; transition: all 1s; } .form__field__dropdown__outer--open .form__field__dropdown__options { display: block; height: 200px; transition: all 1s; } .form__field--dropdown { overflow: hidden; transition: all 1s; } .form__field--full-height { height: 442px; transition: all 1s; } .form__field--hidden.form__field--dropdown { max-height: 0px; transition: all 1s; padding-bottom: 0px; } .form__field__dropdown__arrow { position: relative; vertical-align: top; display: inline-block; margin: 0px 2px; width: 42px; height: 42px; background-color: #F8F7F1; background-image: url('../img/caret-down-solid.svg'); background-repeat: no-repeat; background-size: 16px; background-position: 50% 50%; color: #cccccc; cursor: pointer;} .form__field__dropdown__arrow:hover { background-image: url('../img/caret-down-solid_pink.svg'); } .form__field__dropdown__arrow--hidden { max-height: 0px; opacity: 0; transition: all 0.5s; overflow: hidden; padding-bottom: 0px; } .form__field__dropdown__arrow--show { max-height: 300px; padding-bottom: 16px; opacity: 1; transition: all 1s; } .form__field__dropdown__default { position: relative; display: block; width: 100%; cursor: pointer; color: #cccccc; font-family: 'VAGRoundedNext-Regular', sans-serif; font-size: 32px; line-height: 36px; padding: 3px 24px 3px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .form__field__dropdown__default:hover { color: #EC1C99; } .form__field__input--hidden { max-height: 0px; opacity: 0; transition: all 0.5s; overflow: hidden; padding-bottom: 0px; } .form__field__input--show {max-height: 300px; padding-bottom: 16px; opacity: 1; transition: all 1s; } .form__field__dropdown__options { position: relative; width: 100%; display: block; height: 0px; background-color: #F8F7F1; overflow: hidden; transition: all 1s; } .lookup__outer .form__field__dropdown__options--open { height: 180px; } .lookup__outer .form__field__input { text-transform: uppercase; } .lookup__outer .form__field__input::placeholder { text-transform: none; } .form__field__dropdown__option { position: relative; display: block; width: 100%; cursor: pointer; color: #cccccc; font-family: 'VAGRoundedNext-Regular', sans-serif; font-size: 32px; line-height: 36px; padding: 2px 24px 0px 16px; text-align: left; } .form__field__dropdown__option:hover { color: #EC1C99; } .lookup__outer { position: relative; opacity: 1; transition: all 1s; max-height: 1000px; padding-bottom: 16px; } .lookup__outer--hidden { max-height: 0px; opacity: 0; transition: all 1s; overflow: hidden; padding-bottom: 0px; } .form__field__dropdown__outer--hidden .lookup__outer { display: none; } .form__field__buttons { padding: 0px 8px 0px; font-size: 0px; line-height: 0px; max-height: 60px; opacity: 1; transition: all 1s; max-height: 200px; padding-bottom: 16px; } .form__field__buttons--hidden { max-height: 0px; opacity: 0; transition: all 1s; overflow: hidden; padding: 0px; } .button--form { color: #F8F7F1 !important; padding: 7px 18px 7px; } .button--hidden { max-height: 0px; opacity: 0; transition: all 0.5s; overflow: hidden; margin-bottom: 0px; } .button--show { max-height: 50px; opacity: 1; margin-bottom: 16px; transition: all 1s; } /* COMMENT FIELD */ .form__field--textarea { max-height: none; } .form__field__input__outer--textarea { width: calc(66.66%); padding: 0px 16px; } .form__field__input--textarea { position: relative; display: block; width: 100%; min-height: 200px; resize: vertical; overflow: auto; font-family: 'VAGRoundedNext-Regular', sans-serif; font-size: 32px; line-height: 36px; margin: 0px 0px; background-color: #f8f7f0; color: #cccccc; padding: 16px; } /* perfect-scrollbar v0.8.1 */ .ps { -ms-touch-action: auto; touch-action: auto; overflow: hidden !important; -ms-overflow-style: none; } @supports (-ms-overflow-style: none) { .ps { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps { overflow: auto !important; } } .ps.ps--active-x > .ps__scrollbar-x-rail, .ps.ps--active-y > .ps__scrollbar-y-rail { display: block; background-color: transparent; } .ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail { background-color: #eee; opacity: 0.9; } .ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x { background-color: #999; height: 11px; } .ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { background-color: transparent; opacity: 0.9; } .ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { background-color: #EC1C99; } .ps > .ps__scrollbar-x-rail { display: none; position: absolute; opacity: 0; -webkit-transition: background-color .2s linear, opacity .2s linear; -o-transition: background-color .2s linear, opacity .2s linear; -moz-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; bottom: 0px; height: 15px; } .ps > .ps__scrollbar-x-rail > .ps__scrollbar-x {position: absolute; background-color: #EC1C99; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; bottom: 2px; height: 6px; } .ps > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x, .ps > .ps__scrollbar-x-rail:active > .ps__scrollbar-x { height: 11px; } .ps > .ps__scrollbar-y-rail { display: block; position: absolute; opacity: 0.6; -webkit-transition: background-color .2s linear, opacity .2s linear; -o-transition: background-color .2s linear, opacity .2s linear; -moz-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; right: 0; width: 15px; } .ps > .ps__scrollbar-y-rail > .ps__scrollbar-y { position: absolute; background-color: #EC1C99; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; right: 2px; width: 6px; min-height: 20px !important; } .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y, .ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y { width: 6px; } .ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail { background-color: #eee; opacity: 0.9; } .ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x { background-color: #999; height: 11px; } .ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { background-color: transparent; opacity: 0.9; } .ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { background-color: #EC1C99; width: 6px; } .ps:hover > .ps__scrollbar-x-rail, .ps:hover > .ps__scrollbar-y-rail { opacity: 0.6; } .ps:hover > .ps__scrollbar-x-rail:hover { background-color: #eee; opacity: 0.9; } .ps:hover > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x { background-color: #999; } .ps:hover > .ps__scrollbar-y-rail:hover { background-color: transparent; opacity: 0.9; } .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { background-color: #EC1C99; } /* .form__field--occurances { max-height: 300px; padding-bottom: 48px; opacity: 1; transition: all 1s; } .form__field--hidden { max-height: 200px; opacity: 1; transition: all 1.5s; padding-bottom: 48px; } .form__field--other-reason { max-height: 180px; padding-bottom: 48px; opacity: 1; transition: all 1s; } .form__field--gift-aid { max-height: 180px; padding-bottom: 48px; opacity: 1; transition: all 1s; } .form__field__group--hidden { padding-bottom: 48px; max-height: none; opacity: 1; } .form__field--address { padding-bottom: 48px; max-height: 200px; opacity: 1; } */ /* STRIPE */ .StripeElement { border: 0px; background-color: #f8f7f0; height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 0px; } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; }