.moot-modal { z-index: 9999999 !important; } .moot-modal.show { z-index: 9999999 !important; } .moot-modal+.modal-backdrop, .modal-backdrop { z-index: 9999998 !important; } /* ========================================================= MODAL ========================================================= */ .moot-modal .modal-dialog { max-width: 850px; margin: 15px auto; } .moot-modal .modal-content { border: 0; border-radius: 15px; overflow: hidden; background: #f8f5eb; box-shadow: 0 25px 70px rgba(0, 0, 0, .40); } /* ========================================================= MAIN WRAPPER ========================================================= */ .moot-wrapper { position: relative; overflow-y: auto; max-height: 94vh; color: #173d2b; font-family: 'Poppins', sans-serif; background: radial-gradient(circle at 10% 10%, rgba(201, 107, 57, .06), transparent 22%), #f8f5eb; } /* ========================================================= HEADER ========================================================= */ .moot-header { position: relative; padding: 19px 35px 25px; text-align: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 85% 10%, rgba(201, 107, 57, .16), transparent 20%), linear-gradient(135deg, #07351f, #174b34, #07351f); } /* Decorative circles */ .moot-header:before { content: ""; position: absolute; width: 210px; height: 210px; left: -100px; top: -130px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 50%; } .moot-header:after { content: ""; position: absolute; width: 200px; height: 200px; right: -100px; bottom: -130px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 50%; } /* ========================================================= CLOSE ========================================================= */ .moot-close { position: absolute; top: 10px; right: 12px; z-index: 20; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, .30); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 20px; line-height: 26px; cursor: pointer; transition: .3s; } .moot-close:hover { background: #c96b39; border-color: #c96b39; transform: rotate(90deg); } /* ========================================================= UNIVERSITY ========================================================= */ .moot-university { position: relative; z-index: 2; margin-bottom: 2px; color: #e5b978; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } /* LOCATION */ .moot-location { position: relative; z-index: 2; margin-bottom: 7px; color: #e5b978; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } /* ========================================================= MAIN TITLE ========================================================= */ .moot-header h2 { position: relative; z-index: 2; margin: 0; color: #fff; font-family: 'Playfair Display', Georgia, serif; font-size: 29px; font-weight: 700; line-height: 1.12; text-transform: uppercase; } .moot-header h2 .orange { color: #d16d39; } .moot-header h2 .script { color: #d16d39; font-family: cursive; font-size: 25px; text-transform: none; } /* ========================================================= TAGLINE ========================================================= */ .moot-tagline { position: relative; z-index: 2; margin-top: 8px; color: #d87843; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } /* ========================================================= DATE ========================================================= */ .moot-date { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; width: 65%; margin: -13px auto 0; padding: 8px 15px; border-radius: 8px; background: #d06c2d; color: #fff; box-shadow: 0 7px 18px rgba(0, 0, 0, .18); } .moot-date i { margin-right: 9px; font-size: 17px; } .moot-date strong { font-family: 'Playfair Display', serif; font-size: 17px; } /* ========================================================= BODY ========================================================= */ .moot-body { padding: 20px 25px 18px; } /* ========================================================= INTRO ========================================================= */ .moot-intro { max-width: 750px; margin: 0 auto 17px; text-align: center; color: #606b64; font-size: 11px; line-height: 1.55; } .moot-intro strong { color: #173d2b; } /* ========================================================= THREE INFORMATION CARDS ========================================================= */ .moot-event-wrapper { margin-bottom: 17px; overflow: hidden; border: 1px solid rgba(23, 61, 43, .12); border-radius: 11px; background: #fff; box-shadow: 0 6px 18px rgba(23, 61, 43, .06); } .moot-event-wrapper .row { margin: 0; } /* EVENT CARD */ .moot-event-card { position: relative; min-height: 126px; padding: 19px 12px 16px 66px; overflow: hidden; background: #fff; border-right: 1px solid rgba(23, 61, 43, .10); } .moot-event-wrapper .col-md-4:last-child .moot-event-card { border-right: 0; } /* Number */ .moot-event-number { position: absolute; right: 5px; bottom: -14px; /*color: rgba(23, 61, 43, .045);*/ color: #d06c2d; font-family: 'Playfair Display', serif; font-size: 58px; font-weight: 700; } /* Icon */ .moot-event-icon { position: absolute; left: 15px; top: 20px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eaf0e8; color: #c96b39; font-size: 14px; } /* Label */ .moot-event-label { display: block; margin-bottom: 4px; color: #c96b39; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; } /* Title */ .moot-event-content h5 { margin: 0 0 5px; color: #173d2b; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; line-height: 1.25; } /* Text */ .moot-event-content p { margin: 0; /*color: #68716b;*/ color: #d06c2d; font-size: 10px; line-height: 1.5; } .moot-event-highlight { color: #173d2b; font-size: 8px; font-weight: 700; text-transform: uppercase; } /* ========================================================= LOWER GRID ========================================================= */ .moot-lower-grid { margin-top: 3px; } /* ========================================================= COMMON PANEL ========================================================= */ .moot-panel { height: 100%; min-height: 180px; padding: 15px; border: 1px solid rgba(23, 61, 43, .10); border-radius: 10px; background: #fff; } /* PANEL TITLE */ .moot-panel-title { margin-bottom: 10px; color: #173d2b; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; text-align: center; } .moot-panel-title.orange { color: #c96b39; } /* ========================================================= AWARDS ========================================================= */ .moot-awards { position: relative; } .moot-trophy { text-align: center; color: #c48322; font-size: 55px; line-height: 1; margin-bottom: 8px; } .moot-award-list { margin: 0; padding: 0; list-style: none; } .moot-award-list li { position: relative; padding-left: 18px; margin-bottom: 5px; color: #3e4942; font-size: 10px; } .moot-award-list li:before { content: "★"; position: absolute; left: 0; color: #c96b39; } .moot-award-note { margin-top: 7px; color: #c96b39; font-family: 'Playfair Display', serif; font-size: 12px; font-style: italic; } /* ========================================================= REGISTRATION FEES ========================================================= */ .moot-fee-panel { color: #fff; border: 0; background: linear-gradient(135deg, #07351f, #174b34); } .moot-fee-panel .moot-panel-title { color: #fff; } .moot-fees { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } .moot-fee { width: 50%; padding: 12px 6px; text-align: center; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; background: rgba(255, 255, 255, .06); } .moot-fee small { display: block; margin-bottom: 5px; /*color: rgba(255, 255, 255, .70);*/ font-size: 9px; font-weight: 900; text-transform: uppercase; } .moot-fee strong { display: block; color: #e5b978; font-family: 'Playfair Display', serif; font-size: 21px; } .moot-fee span { /*color: rgba(255, 255, 255, .75);*/ font-size: 9px;font-weight: 900; } /* ========================================================= WHY PARTICIPATE ========================================================= */ .moot-why-list { margin: 0; padding: 0; list-style: none; } .moot-why-list li { display: flex; align-items: center; margin-bottom: 10px; color: #3e4942; font-size: 10px; } .moot-why-list li i { margin-right: 8px; color: #174b34; font-size: 12px; } /* ========================================================= QR SECTION ========================================================= */ .moot-qr-section { margin-top: 15px; } .moot-qr-box { min-height: 138px; padding: 10px; border: 1px solid rgba(23, 61, 43, .12); border-radius: 9px; background: #fff; } /* QR title */ .moot-qr-title { margin-bottom: 8px; color: #173d2b; font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; } .moot-qr-title i { margin-right: 5px; color: #c96b39; } /* QR content */ .moot-qr-content { display: flex; align-items: center; } /* Actual QR */ .moot-qr { width: 100px; height: 100px; padding: 5px; flex-shrink: 0; border: 1px solid #ddd; background: #fff; } .moot-qr img { display: block; width: 90px !important; height: 90px !important; } /* QR text */ .moot-qr-info { padding-left: 12px; } .moot-qr-info strong { display: block; margin-bottom: 4px; color: #c96b39; font-size: 15px; } .moot-qr-info p { margin: 0; word-break: break-word; color: #777; font-size: 15px; line-height: 1.7; } /* ========================================================= CTA ========================================================= */ .moot-cta { margin-top: 15px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(23, 61, 43, .12); border-radius: 8px; background: #fff; } .moot-cta-text { display: flex; align-items: center; color: #173d2b; font-size: 10px; font-weight: 600; } .moot-cta-text i { margin-right: 8px; color: #c96b39; font-size: 19px; } .moot-register-btn { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 22px; background: #c96b39; color: #fff !important; font-size: 10px; font-weight: 700; text-decoration: none !important; white-space: nowrap; box-shadow: 0 5px 12px rgba(201, 107, 57, .20); transition: .25s; } .moot-register-btn:hover { background: #173d2b; transform: translateY(-1px); } .moot-register-btn i { margin-left: 7px; } /* ========================================================= CONTACT ========================================================= */ .moot-contact { padding: 5px 0 3px; text-align: center; color: #737b75; font-size: 14px; } .moot-contact strong { color: #173d2b; } .moot-contact a { color: #173d2b; text-decoration: none; } /* ========================================================= FOOTER ========================================================= */ .moot-footer { padding: 8px 15px; text-align: center; background: #07351f; color: rgba(255, 255, 255, .70); font-size: 11px; } .moot-footer strong { color: #e5b978; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .moot-modal .modal-dialog { margin: 7px; } .moot-wrapper { max-height: 96vh; } .moot-header { padding: 18px 25px 23px; } .moot-university { font-size: 17px; } .moot-location { font-size: 8px; } .moot-header h2 { font-size: 21px; } .moot-header h2 .script { font-size: 19px; } .moot-tagline { font-size: 8px; } .moot-date { width: 92%; } .moot-date strong { font-size: 14px; } .moot-body { padding: 15px 12px; } .moot-intro { font-size: 10px; } .moot-event-card { min-height: auto; padding: 17px 14px 17px 62px; border-right: 0; border-bottom: 1px solid rgba(23, 61, 43, .08); } .moot-event-wrapper .col-md-4:last-child .moot-event-card { border-bottom: 0; } .moot-panel { margin-bottom: 10px; } .moot-qr-content { justify-content: center; } .moot-cta { display: block; text-align: center; } .moot-cta-text { justify-content: center; margin-bottom: 9px; } .moot-register-btn { justify-content: center; width: 100%; } }