/* GIVE / DONATE */

.main-layout { display: flex; flex-direction: column; max-width: 100%; padding: 0; position: relative; }
.wp-block-spacer, .wp-block-separator { display: none; }
.wp-container-2, .wp-container-1 { height: 100%; }
.wp-container-1 { overflow-x: hidden; }

.give-img { position: relative; background: url(https://gtsacademy.com/wp-content/uploads/2022/06/onboarding-preview-form-image.min_.jpg) center no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; }
.give-img:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right:0; background: rgba(0, 0, 0, 0.6); z-index: 0; }
.give-guide { max-width: 895px; width: 100%; padding: 20px; position: relative; z-index: 1; color: #fff; }
.give-guide h1 { font-size: 60px; color: #fff; }
.give-guide p { font-size: 22px; line-height: 1.6; margin-bottom: 0; }

.give-wrap-3 { display: flex; width: 100%; border-bottom: 7px solid #795c4e; }
.give-wrap-3 > div { width: 50%; display: flex; flex-direction: column; }

.give-tab-wrap { display: block; width: 100%; font-family: 'Roboto', sans-serif; padding: 0 40px; }
.give-tab-wrap input { display: none; }

#give-input-1-label { padding: 0; font-size: 21px; color: #333; display: block; text-align: left; max-width: 552px; margin: 30px auto 3px; }
#give-input-1 { padding: 15px 20px; margin: 0 auto; display: block; width: 100%; background: #795c4e; border: none; color: #fff; font-size: 22px; font-family: 'Roboto', sans-serif; text-align: center; outline: none; border-radius: 0; cursor: pointer; box-shadow: none; }

.give-select-1 { background: #fff; max-width: 552px; margin: 0 auto; position: relative; border: 1px solid #c5c5c5; }
.give-select-1 select { display: none; }
.select-selected { background-color: #fff; font-size: 18px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Style the arrow inside the select element: */
.select-selected:after { position: absolute; display: inline-block; content: ""; width: 0; height: 0; margin-top: -3px; right: 10px; top: 50%; transform: translateX(-50%); border: 7px solid transparent; border-color: #333 transparent transparent transparent; flex-shrink: 0; }
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after { border-color: transparent transparent #333 transparent; margin-top: -11px; }

/* style the items (options), including the selected item: */
.select-items div { border-bottom: 1px solid #e7e7e7; }
.select-items div, .select-selected { display: block; width: 100%; color: #333; padding: 15px 45px 15px 20px; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; }
/* Style items (options): */
.select-items { position: absolute; background-color: #fff; border: 1px solid #c5c5c5; top: 100%; left: 0; right: 0; z-index: 5; }

/* Hide the items when the select box is closed: */
.select-hide { display: none; }
.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }

.give-content-load { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 10; display: flex; align-items: center; justify-content: center; }
.give-content { background: #fff linear-gradient(to bottom, #f9f9f9, #fff); position: relative; }
.give-window { z-index: 3; padding: 20px 30px; position: relative; flex-grow: 1; min-height: 720px; margin-bottom: 30px; opacity: 0; }
.give-wrap { display: block; max-width: 550px; width: 100%; margin: 0 auto; position: relative; height: 100%; }

.give-wrap .give-grid { display: block !important; margin: 0; }
.give-wrap .give-grid__item { animation-name: slideOutTab; animation-duration: 0.5s; animation-fill-mode: forwards; display: flex; visibility: hidden; position: absolute; top: 20px; opacity: 0; max-width: 550px; width: 100% !important; z-index: 0; }
.give-wrap .give-grid__item.active { animation-name: slideInTab; animation-duration: 0.5s; animation-delay: 0.15s; animation-fill-mode: forwards; z-index: 1; }
.give-donation-summary-section .give-donation-summary-help-text { display: none; }

@keyframes slideInTab {
    0%   { opacity: 0; left: -100px; visibility: visible;  }
    100% { opacity: 1; left: 0px; visibility: visible; }
}
@keyframes slideOutTab {
    0%   { opacity: 1; left: 0px; visibility: visible; }
    100% { opacity: 0; left: 100px; visibility: hidden; }
}

.give-wrap-2 { padding: 60px 20px 100px; background: url(https://gtsacademy.com/wp-content/themes/gtsa/assets/images/noise.svg); }
.give-where-wrap { display: flex; padding: 0 20px; max-width: 1480px; margin: 0 auto; width: 100%; flex-wrap: wrap; justify-content: space-around; }
.give-where { width: 435px; background: #fff; margin: 20px; border-radius: 3px; flex-shrink: 0; }
.give-where-head { display: block; text-align: center; background: #523c31; padding: 15px; color: #fff; }
.give-where-body { padding: 20px; display: block; }
.give-where-img { height: 150px; overflow: hidden; position: relative; }
.give-where-img > img { display: block; width: 100%; position: absolute; }
.g-img1 img { top: 0; }
.g-img2 img { top: -60px; }
.g-img3 img { top: -35px; }
.g-img4 img { bottom: 0; }
.g-img5 img { bottom: -60px; }
.g-img6 img { bottom: -60px; }
.give-where-title { margin: 0 0 15px; text-align: center; }

@media only screen and (max-width: 1300px) {
    .give-where-wrap { justify-content: space-around; }
    .give-where { width: 400px; }
}

@media only screen and (max-width: 1200px) {
    .give-wrap-3 { flex-direction: column; }
    div.give-img { width: 100%; }
    div.give-content { flex-grow: 1; width: 100%; }

    .give-wrap .give-grid__item { top: 0; }
    .give-wrap .give-grid__item.active { position: relative; }
    .give-window { min-height: auto; margin-bottom: 0; }

    .give-guide h1, .give-where-title { font-size: 52px; }
    .give-wrap-2 { padding: 40px 20px; }
}