/* CSS Document */ body { font-family: 'Nunito Sans' !important; } .clear-both { clear: both; } #loading-spinner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgba(255,255,255,0.8); padding-top: 45%; opacity: 0; transition: opacity 0.7s; } #loading-spinner.show { z-index: 999; opacity: 1.0; } #loading-spinner .spinner-border { width: 50vw; height: 50vw; --bs-spinner-border-width: 1.25em; color: rgba(51,61,81,0.5); } button, a.btn { touch-action: manipulation; } #notification-bar { background: #e14030; width: calc(100% - 4rem); margin: 0 2rem -5px; border-radius: 0 0 15px 15px; color: #fff; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: 700; padding: 8px 12px; line-height: 1.4; } #notification-bar p { margin: 0; } #notification-bar p a { color: #fff; } body.Users.settings #notification-bar, body.Events.view #notification-bar { display: none; } #notifications-prompt { background: #333d51; border-radius: 15px; color: #fff; padding: 15px; margin: 2rem 2rem 0; font-size: 15px; } body.Users.settings #notifications-prompt { display: none !important; } #notifications-prompt a { display: inline-block; background: #e44131; color: #fff; border: 1.5px solid #e44131; text-decoration: none; padding: 2px 10px; border-radius: 15px; text-transform: uppercase; } #notifications-prompt a#notifications-prompt-more-info-button { float: left; } #notifications-prompt a#notifications-prompt-allow-button { float: right; margin-right: 5px; } #notifications-prompt a#notifications-prompt-deny-button { float: right; background: rgba(255,255,255,0.7); color: #333d51; border-color: #fff; } nav.top-nav { max-width: 100vw; background: #fff; height: 17vw; max-height: 110px; margin-bottom: 0; flex-wrap: wrap; } nav.top-nav.home { height: 15vw; max-height: 90px; } nav.top-nav #logo { max-width: 400px; width: 75%; margin-bottom: 0.5rem; } nav.top-nav .top-nav-title { width: calc(100% - 130px); } nav.top-nav .top-nav-links { width: 130px; text-align: right; } nav.top-nav #notifications-button, nav.top-nav #language-button, nav.top-nav #about-button { font-size: 20px; margin: 0 0.75rem; } nav.top-nav .top-nav-links a.active { color: #e44131; } @media (display-mode: standalone) and (orientation: portrait) { nav.top-nav { height: 14vw; padding: 0 20px 15px; } nav.top-nav.home { height: 12vw; } } @media (display-mode: standalone) and (orientation: landscape) { nav.top-nav { height: 14vw; padding: 15px 20px 15px; } nav.top-nav.home { height: 12vw; } } nav.top-nav .top-nav-progress { width: 100%; padding-top: 1vw; } nav.top-nav .top-nav-progress .progress-bar { background-color: #e44131; } @media (display-mode: standalone) and (orientation: landscape) and ( max-width: 400px ) { nav.top-nav .top-nav-progress { padding-top: 0; } } #language-dropdown li { margin-bottom: 0; } #language-dropdown li.active { background: #e14030; } #language-dropdown li.active a { color: #fff; } #language-dropdown li a { font-size: 22px; display: inline-block; width: 100%; text-align: center; margin: 0; padding: 5px 0; text-decoration: none; } #language-dropdown li a:active { background: #ddd; } main { display: block; position: relative; height: calc(100vh - 12vw - 90px); min-height: calc(100vh - 180px); overflow-y: auto; background: #e6e5e5; color: #333d51; } main .content { background: none; padding: 2em; max-width: 600px; margin: 0 auto; } main .content h1 { text-transform: uppercase; letter-spacing: 0.03em; font-weight: bold; margin-bottom: 1.5rem; } @media (min-width:600px) { nav.top-nav { height: 80px; max-height: 80px; } nav.top-nav .top-nav-title.full-width { text-align: center; width: 100vw; } nav.top-nav .top-nav-title.full-width #logo { max-width: 300px; } nav.top-nav .top-nav-title.full-width + .top-nav-links { display: none; } main { height: calc(100vh - 12vw - 90px); min-height: calc(100vh - 150px); } body.Users.login main#main, body.Users.reset main#main, body.Users.forgot main#main { height: calc(100vh - 80px); } } #searchForm { position: relative; margin-bottom: 20px; } #searchForm #search { background: #fff; border: none; border-radius: 20px; font-size: 14px; padding-left: 16px; } body.Pages.start { width: 100vw; height: 100vh; background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.Pages.start #main { background: rgba(255,255,255,0.7) url('/img/100k_admin_header_logo.png'); background-repeat: no-repeat; background-size: 60%; background-position: center 33%; height: 100vh; width: 100vw; } body.Pages.start nav.top-nav { display: none; } body.Pages.start footer { display: none; } body.error { background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.error #main { background: rgba(255,255,255,0.6); height: calc(100vh - 14vw); min-height: calc(100vh - 110px); padding-top: 100px; text-align: center; } body.error #main h2 { font-size: 24px; color: #333d51; } body.error #main p { font-size: 15px; color: #333d51; } body.error #main a.btn { background: #e44131; font-size: 14px; border-radius: 25px; text-transform: uppercase; font-weight: 600; color: #fff; padding: 3px 15px; margin-top: 5px; } body.Users.login, body.Users.reset, body.Users.forgot { width: 100vw; height: 100vh; background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.Users.login #main, body.Users.reset #main, body.Users.forgot #main { background: rgba(255,255,255,0.7); height: calc(100vh - 12vw); } body.Users.login #main p, body.Users.reset #main p, body.Users.forgot #main p { font-size: 15px; } body.Users.login #main p a, body.Users.reset #main p a, body.Users.forgot #main p a { color: #d33c43; text-transform: uppercase; } body.Users.login #main form, body.Users.reset #main form, body.Users.forgot #main form { background: #333d51; border-radius: 20px; padding: 2em 2em 0em; margin-top: 2em; margin-bottom: 4em; color: #fff; } body.Users.login #main form label, body.Users.reset #main form label, body.Users.forgot #main form label { font-size: 16px; margin: 0; padding-left: 1.4rem; } body.Users.login #main form input, body.Users.reset #main form input, body.Users.forgot #main form input { background: #ffffff; color: #333d51; border-radius: 15px; font-size: 14px; padding: 1rem 1.4rem; line-height: 1.2; margin-bottom: 1.2rem;} body.Users.login #main form button { font-size: 14px; text-transform: uppercase; border-radius: 15px; width: 150px; position: relative; bottom: -20px; } body.Users.forgot #main form button { font-size: 14px; text-transform: uppercase; border-radius: 15px; width: 250px; position: relative; bottom: -20px; } body.Users.reset #main form button { font-size: 14px; text-transform: uppercase; border-radius: 15px; width: 250px; position: relative; bottom: -20px; } body.Users.login #main form button + button { margin-left: 10px; } body.Users.add { width: 100vw; height: 100vh; background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.Users.add #main { background: rgba(255,255,255,0.7); height: calc(100vh - 12vw); } body.Users.add #main p { font-size: 15px; } body.Users.add #main p a { color: #d33c43; text-transform: uppercase; } body.Users.add #main form { background: #333d51; border-radius: 20px; padding: 2em 2em 0em; margin-top: 2em; margin-bottom: 4em; color: #fff; } body.Users.add #main form label { font-size: 16px; margin: 0; padding-left: 1.4rem; } body.Users.add #main form input, body.Users.add #main form select { background: #ffffff; color: #333d51; border-radius: 15px; font-size: 14px; padding: 1rem 1.4rem; line-height: 1.2; margin-bottom: 1.2rem;} body.Users.add #main form button { font-size: 14px; text-transform: uppercase; border-radius: 15px; width: 150px; position: relative; bottom: -20px; margin-top: -15px; } body.Users.add #main form button + button { margin-left: 10px; } body.Users.install { width: 100vw; height: 100vh; background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.Users.install main { background: none; padding: 2em; } body.Users.install main .content { background: rgba(255,255,255,0.7); border-radius: 15px; } body.Users.settings { width: 100vw; height: 100vh; background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.Users.settings #main { padding: 2em; height: calc(100vh - 12vw); background: none; font-size: 16px; } body.Users.settings #main .users.settings { background: rgba(255, 255, 255, 0.7); border-radius: 20px; padding: 25px 30px 20px 30px; font-size: 16px; font-weight: 500; line-height: 1.2; } body.Users.settings #main input[type="checkbox"]#notifications { margin: -0.25rem 20px 0 10px; width: 60px; height: 60px; } body.Users.settings #main ul { list-style: disc; margin-left: 10px; } body.Users.settings #main ul li { margin-bottom: 0; margin-bottom: 5px; } body.Users.settings #main #debug { position: absolute; bottom: 90px; right: 0; color: #333d51; width: 100vw; text-align: right; padding: 5px 15px; background: rgba(255, 255, 255, 0.6); font-size: 10pt; font-weight: bold; } body.Resources #resourcesAccordion .accordion-body { padding-left: 0; padding-right: 0; } body.Resources #resourcesAccordion .accordion-item { background: none; margin-bottom: 6px; } body.Resources #resourcesAccordion .accordion-button { background: #e44131; border-radius: 100px; color: #fff; text-transform: uppercase; font-size: 13px; padding: 8px 15px; height: 3.5rem; } body.Resources #resourcesAccordion .accordion-button::after { color: #fff; filter: invert(100%); } body.Resources a.resource-title { display: block; text-transform: uppercase; font-weight: bold; font-size: 13px; text-decoration: none; color: #333d51; letter-spacing: 0.02em; line-height: 1.25; margin-left: 15px; margin-right: 14px; padding: 6px 20px 6px 0; position: relative; } body.Resources a.resource-title::after { display: inline-block; width: var(--bs-accordion-btn-icon-width); height: var(--bs-accordion-btn-icon-width); margin-left: auto; content: ""; background-image: var(--bs-accordion-btn-icon); background-repeat: no-repeat; background-size: var(--bs-accordion-btn-icon-width); transition: var(--bs-accordion-btn-icon-transition); position: absolute; top: 8px; right: 0; } body.Resources a.resource-title:not(.collapsed)::after { background-image: var(--bs-accordion-btn-active-icon); transform: var(--bs-accordion-btn-icon-transform); } body.Resources div.card.card-body { padding: 0; border-radius: 15px; margin: 0 0 10px; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; background: none; border: 0;} body.Resources div.card.card-body iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; } body.Resources #resources-city-leaders a.resource-title { background: rgba(51, 61, 81, 0.2); padding: 6px 20px 6px 15px; border-radius: 15px; margin-left: 0; margin-right: 0; } body.Resources #resources-city-leaders a.resource-title::after { right: 15px; } body.Resources #resources-city-leaders .accordion-collapse .accordion-body { padding-left: 15px; padding-right: 15px; } body.Resources #resources-city-leaders > .accordion-body > p { padding-left: 15px; padding-right: 15px; color: #333d51; font-size: 13px; } body.Resources #resources-city-leaders > .accordion-body > p > a { font-weight: bold; color: #e44131; } body.Resources #resources-city-leaders table.city-leaders { display: table; } body.Resources #resources-city-leaders table.city-leaders tbody { display: table-row-group; overflow-x: visible; } body.Resources #resources-city-leaders table.city-leaders tr { border-right: 0; } body.Resources #resources-city-leaders table.city-leaders th.city { display: table-cell; padding: 2rem 0 0.2rem; background: none; color: #333d51; text-transform: uppercase; font-weight: bold; letter-spacing: 0.02em; font-size: 13px; } body.Resources #resources-city-leaders table.city-leaders tr:first-child th.city { padding-top: 0.3rem; } body.Resources #resources-city-leaders table.city-leaders tr.city-leader td { display: table-cell; padding: 0; background: none; font-size: 12px; color: #333d51; } body.Resources #resources-city-leaders table.city-leaders tr.city-leader td.name { } body.Resources #resources-city-leaders table.city-leaders tr.city-leader td.email { text-align: right; } body.Resources #resources-city-leaders table.city-leaders tr.city-leader td.email a { color: #e44131; } body.Resources #resources-city-leaders table.city-leaders tr.city-leader td.phone { } body.Events h1 #type { border: none; text-transform: uppercase; font-weight: 400; display: inline-block; width: 160px; padding-right: 12px; padding-left: 0; background: none; color: rgb(51, 61, 81); letter-spacing: 0.03em; } body.Events #searchForm .input.text { display: inline-block; width: calc(100% - 110px); } body.Events #searchForm .input.select { display: inline-block; width: 100px; float: right; margin-top: -21px; } body.Events #searchForm .input.select label { font-size: 14px; text-transform: uppercase; padding-left: 10px; margin-bottom: 0; } body.Events #searchForm #province { background: #fff; border: none; border-radius: 20px; font-size: 14px; padding-left: 0; padding-right: 0; text-align: center; color: #333d51; } body.Events #events-list .event { display: block; width: 100%; height: 300px; border-radius: 20px; margin-bottom: 20px; position: relative; overflow: hidden; } body.Events #events-list .event .background { display: block; width: 100%; min-height: 210px; background-size: cover; background-position: center top; } body.Events #events-list .event .date { position: absolute; top: 20px; left: 20px; background: rgba(150,150,150,0.9); width: 55px; height: 63px; border-radius: 15px; color: #fff; line-height: 1; padding-top: 12px; } body.Events #events-list .event .date .month { text-transform: uppercase; font-weight: 500; font-size: 14px; display: block; text-align: center; letter-spacing: 0.05em; } body.Events #events-list .event .date .day { font-weight: 600; font-size: 26px; display: block; text-align: center; letter-spacing: 0.02em; } body.Events #events-list .event .details { width: 100%; min-height: 30%; position: absolute; bottom: 0; left: 0; background: #fff; padding: 15px; text-transform: uppercase; line-height: 1.1; } body.Events #events-list .event .details .title { text-transform: uppercase; font-size: 17px; font-weight: 600; letter-spacing: 0.03em; color: #333d51; line-height: 1.5; } body.Events #events-list .event .details .time, body.Events #events-list .event .details .location { font-size: 14px; color: #999; font-weight: 400; } body.Events #events-list .no-results { text-align: center; font-size: 16px; } body.Events.view #main .header { margin: -2em -2em 2em; min-height: 50vw; background-size: cover; background-position: center top; position: relative; } body.Events.view #main .header .date { position: absolute; top: 2rem; right: 2rem; background: rgba(150,150,150,0.9); width: 55px; height: 63px; border-radius: 15px; color: #fff; line-height: 1; padding-top: 12px; font-size: 14px; } body.Events.view #main .header .date .month { text-transform: uppercase; font-weight: 500; font-size: 14px; display: block; text-align: center; letter-spacing: 0.05em; } body.Events.view #main .header .date .day { font-weight: 600; font-size: 26px; display: block; text-align: center; letter-spacing: 0.02em; } body.Events.view #main .details { background: #fff; border-radius: 15px; padding: 20px; position: relative; top: -40px; } body.Events.view #events-back-button { color: #e44131; background: rgba(255, 255, 255, 0.9); font-size: 20px; width: 30px; display: block; height: 30px; text-align: center; border-radius: 5px; position: absolute; top: 2rem; left: 2rem; } body.Events.view h1 { margin-bottom: 5px; } body.Events.view h2 { margin-bottom: 1.5rem; color: #888; font-weight: 300; letter-spacing: 0; font-size: 14px; padding-left: 2px; } body.Events.view h2 i { color: #333d51; } body.Events.view h3 { font-weight: 700; letter-spacing: 0; font-size: 16px; text-transform: uppercase; margin-top: 20px; } body.Events.view .description { font-size: 15px; } body.Events.view .organizer { font-size: 15px; line-height: 1.2; } body.Events.view .location { font-size: 15px; line-height: 1.2; } body.Events.view a.btn { background: #e44131; font-size: 14px; border-radius: 25px; text-transform: uppercase; font-weight: 600; color: #fff; padding: 3px 15px; margin-top: 5px; } body.GospelShares { width: 100vw; height: 100vh; background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.GospelShares main { background: rgba(255,255,255,0.6); } body.GospelShares #tally-container { position: relative; width: 100%; height: auto; margin-bottom: 20px; } body.GospelShares #tally-container .my-tally { display: block; width: 31%; background: #e44131; border-radius: 20px; color: #fff; line-height: 1; padding: 10px 10px; text-align: center;} body.GospelShares #tally-container .my-tally h2 { text-transform: uppercase; font-size: 16px; font-weight: 700; margin-bottom: 0; letter-spacing: 0.03em; } body.GospelShares #tally-container .my-tally #my-tally { font-size: 54px; font-weight: bold; line-height: 1.1; } body.GospelShares #tally-container .tally { display: block; position: absolute; bottom: 0; float: left; width: 22%; background: #333d51; color: #fff; margin-left: 1%; font-size: 44px; text-align: center; font-weight: bold; line-height: 1; padding: 10px 0; border-radius: 20px; } body.GospelShares #tally-container .tally.prayers { left: 31%; } body.GospelShares #tally-container .tally.healings { left: 54%; } body.GospelShares #tally-container .tally.words { left: 77%; } body.GospelShares #tally-container .tally label, body.GospelShares #tally-container .my-tally label { display: block; text-transform: uppercase; font-size: 12px; font-weight: 400; margin-bottom: 0; } body.GospelShares #gospel_shares-list { } body.GospelShares #gospel_shares-list .gospelShare { display: block; width: 100%; min-height: 70px; background: #5c6778; border-radius: 20px; padding: 10px 15px; margin-bottom: 10px; text-decoration: none; color: #fff; text-transform: uppercase; position: relative; } body.GospelShares #gospel_shares-list .gospelShare .date { font-size: 16px; } body.GospelShares #gospel_shares-list .gospelShare .name { font-size: 16px; position: absolute; top: 10px; right: 15px; } body.GospelShares #gospel_shares-list .gospelShare .testimony-notes { padding-right: 15px; } body.GospelShares #gospel_shares-list .gospelShare .edit-icon { font-size: 16px; position: absolute; bottom: 10px; right: 15px; } body.GospelShares.add h1, body.GospelShares.edit h1 { font-weight: 800; } body.GospelShares.add h1 .tighten, body.GospelShares.edit h1 .tighten { font-weight: 700; letter-spacing: -0.02em; font-size: 95%; } body.GospelShares.add p, body.GospelShares.edit p { font-size: 15px; } body.GospelShares.add #gospel-share-form-container, body.GospelShares.edit #gospel-share-form-container { background: #333d51; border-radius: 20px; padding: 2.5em 2em 0; margin-top: 1rem; margin-bottom: 2.5rem; color: #fff; position: relative; } body.GospelShares.add #gospel-share-form, body.GospelShares.edit #gospel-share-form { padding: 0; } body.GospelShares.add #gospel-share-form-container label, body.GospelShares.edit #gospel-share-form-container label { font-size: 16px; margin: 0; padding-left: 1.4rem; line-height: 1.25; } body.GospelShares.add #gospel-share-form-container input, body.GospelShares.add #gospel-share-form-container textarea, body.GospelShares.edit #gospel-share-form-container input, body.GospelShares.edit #gospel-share-form-container textarea { background: #e6e5e5; color: #333d51; border-radius: 15px; font-size: 14px; padding: 1rem 1.4rem; line-height: 1.2; margin-bottom: 1rem; } body.GospelShares.add #gospel-share-form-container input[type="checkbox"], body.GospelShares.edit #gospel-share-form-container input[type="checkbox"] { width: 20px; height: 20px; accent-color: #d33c43; position: relative; top: 3px; margin-bottom: 0.75rem; left: 7px; } body.GospelShares.add #gospel-share-form-container .input.checkbox, body.GospelShares.edit #gospel-share-form-container .input.checkbox { margin-bottom: 0; } body.GospelShares.add #gospel-share-form-container textarea, body.GospelShares.edit #gospel-share-form-container textarea { min-height: 60px; } body.GospelShares.add #gospel-share-form-container input#created, body.GospelShares.edit #gospel-share-form-container input#created { display: block; width: calc(100vw - 80px); } body.GospelShares.add #gospel-share-form-container input#created::-webkit-date-and-time-value, body.GospelShares.edit #gospel-share-form-container input#created::-webkit-date-and-time-value { text-align: left; padding: 1rem 0.7rem; width: calc(100% - 1.4rem); } body.GospelShares.add #gospel-share-form-container .row, body.GospelShares.edit #gospel-share-form-container .row { flex-direction: inherit; } body.GospelShares.add #gospel-share-form-container .row#what-happened-row, body.GospelShares.edit #gospel-share-form-container .row#what-happened-row { margin-bottom: 10px; margin-top: 3px; } body.GospelShares.add #gospel-share-form-container .row#what-happened-row label, body.GospelShares.edit #gospel-share-form-container .row#what-happened-row label { font-weight: normal; } body.GospelShares.add #gospel-share-form label[for="date"], body.GospelShares.edit #gospel-share-form label[for="date"] { display: block; } body.GospelShares.add #gospel-share-form-container #submit-button, body.GospelShares.add #gospel-share-form-container #skip-button, body.GospelShares.add #gospel-share-form-container #delete-button, body.GospelShares.edit #gospel-share-form-container #submit-button, body.GospelShares.edit #gospel-share-form-container #skip-button, body.GospelShares.edit #gospel-share-form-container #delete-button { width: auto; font-size: 14px; text-transform: uppercase; border-radius: 15px; padding-left: 12px; padding-right: 12px; position: relative; bottom: -15px; } body.GospelShares.add #gospel-share-form-container #skip-button, body.GospelShares.add #gospel-share-form-container #delete-button, body.GospelShares.edit #gospel-share-form-container #skip-button, body.GospelShares.edit #gospel-share-form-container #delete-button { background: #e6e5e5; border-color: #ddd; color: #333d51; margin-right: 5px; } body.GospelShares.add #gospel-share-form-container #submit-button, body.GospelShares.edit #gospel-share-form-container #submit-button { margin-left: 5px; font-weight: 800; } body.GospelShares.add #gospel-share-form-container #delete-button, body.GospelShares.edit #gospel-share-form-container #delete-button { font-weight: bold; text-decoration: none; height: 3.8rem; display: inline-block; line-height: 3.8rem; } body.GospelShares.edit #multiple-tabs { } body.GospelShares.add #multiple-tabs button.nav-link, body.GospelShares.edit #multiple-tabs button.nav-link { background: #ccc; color: #5c6778; border-radius: 15px; text-transform: uppercase; font-size: 14px; font-weight: 700; } body.GospelShares.add #multiple-tabs button.nav-link.active, body.GospelShares.edit #multiple-tabs button.nav-link.active { background: #d33c43; color: #fff; } body.GospelShares.edit label#i-shared-with { } body.GospelShares.add #gospel-share-form-container .btn-group.counter, body.GospelShares.edit #gospel-share-form-container .btn-group.counter { width: 100%; } body.GospelShares.add #gospel-share-form-container .btn-group.counter a.btn, body.GospelShares.edit #gospel-share-form-container .btn-group.counter a.btn { display: inline-block; background: #e6e5e5; color: #d33c43; width: 40px; border-radius: 25px; height: 40px; font-size: 30px; font-weight: bold; line-height: 0.95; } body.GospelShares.add #gospel-share-form-container .btn-group.counter input[type="number"], body.GospelShares.edit #gospel-share-form-container .btn-group.counter input[type="number"] { width: calc(100% - 80px); } body.Pages.home { width: 100vw; height: 100vh; background: url('/img/wheat-field.jpg'); background-size: cover; background-position: center; } body.Pages.home main { background: none; } body.Pages.home .section.activity, body.Pages.home .section.scripture, body.Pages.home .section.testimony { border-radius: 20px; background: rgba(255,255,255,0.8); padding: 20px; font-size: 14px; font-weight: 500; line-height: 1.2; } body.Pages.home .section.activity { background: rgba(255,255,255,0.7); text-align: center; padding-bottom: 0; } body.Pages.home .section.activity h1 { margin-bottom: 0; text-align: center; font-weight: 400; } body.Pages.home .section.activity h1 #name { font-weight: 800; } body.Pages.home #svg-container { width: 85%; margin: 0 auto; position: relative; } body.Pages.home svg { width: 100%; } body.Pages.home #tick-marks-circle { transform-origin: center; transform: rotate(90deg); } body.Pages.home #canada-activity-circle { transform-origin: center; transform: rotate(90deg); transition: all 2s; } body.Pages.home #my-activity-tally, body.Pages.home #canada-activity-tally { text-transform: uppercase; font-size: 18px; font-weight: 400; width: 60%; height: 54px; background: rgba(0,0,0,0); } body.Pages.home #my-activity-tally { position: absolute; top: 60%; left: 20%; } body.Pages.home #canada-activity-tally { position: absolute; top: 20%; left: 20%; } body.Pages.home #my-activity-tally .count { font-size: 44px; font-weight: 800; line-height: 1; } body.Pages.home #canada-activity-tally .count { font-size: 36px; font-weight: 800; line-height: 1.1; } body.Pages.home #canada-activity-tally .count .total { font-size: 16px; display: block; font-weight: 300; } body.Pages.home #gospel-share-button { display: block; margin: -31px auto 10px; width: 200px; height: 58px; position: relative; background: #2f3d53; border-radius: 15px; border: none; padding: 11px 0; line-height: 1.1; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 16px; } body.Pages.home #gospel-share-button i { position: relative; top: -4px; color: #fff; font-size: 40px; float: right; right: -16px; margin-left: -20px; background: #e14030; border-radius: 50%; line-height: 0.9; } body.Pages.home #gospel-share-button span { font-weight: 300; font-style: italic; } body.Pages.home .section.scripture { margin-bottom: 20px; font-weight: 400; letter-spacing: 0.03em; } body.Pages.home .section.scripture p.scripture { margin-bottom: 5px; font-style: italic; line-height: 1.3; } body.Pages.home .section.scripture p.reference { font-weight: 700; text-transform: uppercase; text-align: right; margin-bottom: 0; } body.Pages.home .section.testimony h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; } body.Pages.home .section.testimony p.testimony { font-weight: 400; letter-spacing: 0.03em; font-style: italic; } body.Pages.home .section.testimony p.name { font-weight: 700; text-transform: uppercase; text-align: right; margin-bottom: 0; } body.Pages.about #aboutAccordion .accordion-body { font-size: 14px; } body.Pages.about #aboutAccordion .accordion-item { background: none; margin-bottom: 6px; } body.Pages.about #aboutAccordion .accordion-button { background: #e44131; border-radius: 100px; color: #fff; text-transform: uppercase; font-size: 13px; padding: 8px 15px; height: 3.5rem; } body.Pages.about #aboutAccordion .accordion-button::after { color: #fff; filter: invert(100%); } body.Pages.about #aboutAccordion #accordion-partners .accordion-body { display: flex; flex-wrap: wrap; } body.Pages.about #aboutAccordion #accordion-partners a.partner { flex: 1 1 50%; padding: 5%; } body.Pages.about p a { color: #e44131; } footer { position: fixed; bottom: 0; width: 100%; height: 90px; padding: 15px 4%; background: #fff; } footer #navbar { margin: 0 auto; height: 100%; background: #333d51; border-radius: 45px; color: #fff; overflow: hidden; } footer #navbar ul { margin: 0; padding: 0; height: 100%; } footer li.nav-item { display: inline-block; width: 25%; height: 100%; margin: 0; } footer li.nav-item:nth-child(1) { padding-left: 6px; } footer li.nav-item:nth-child(4) { padding-right: 6px; } footer li.nav-item.active { background: #45526d; color: #fff; } footer li.nav-item a.nav-link { font-size: 24px; text-align: center; height: 100%; padding: 4px 0; cursor: pointer; } footer li.nav-item a.nav-link i { font-size: 24px; } footer li.nav-item a.nav-link label { display: block; font-size: 12px; text-transform: uppercase; line-height: 1; margin-bottom: 0; } @media (max-width:400px) { main .content { padding: 1.5rem 1.5rem; } body.GospelShares.edit main .content { padding-left: 1rem; padding-right: 1rem; } body.GospelShares.edit main .content #gospel-share-form-container { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 2rem; } body.GospelShares.edit main .content #gospel-share-form-container label#i-shared-with { padding-left: 0.4rem; } body.GospelShares.edit main .content #gospel-share-form-container input#created { width: calc(100vw - 45px); } body.GospelShares #tally-container .tally label, body.GospelShares #tally-container .my-tally label { font-size: 10px; } footer #navbar.fr li.nav-item a.nav-link label { letter-spacing: -0.03em; } } @media (min-width:500px) { body.GospelShares.edit main .content #gospel-share-form-container #multiple-tabs button.nav-link { padding-left: 20px; padding-right: 20px; } body.GospelShares.edit main .content #gospel-share-form-container #multiple-tabs li.nav-item:first-child button.nav-link { margin-right: 10px; } } @media (max-width:374px) { nav.top-nav #notifications-button, nav.top-nav #about-button { font-size: 16px; margin: 0 0.6rem; } main { height: calc(100vh - 18vw - 70px); } footer { padding: 8px 5px; height: 76px; } footer #navbar ul li.nav-item:nth-child(1) { width: 24%; padding-left: 6px; } footer #navbar ul li.nav-item:nth-child(2) { width: 24%; } footer #navbar ul li.nav-item:nth-child(3) { width: 28%; } footer #navbar ul li.nav-item:nth-child(4) { width: 24%; padding-right: 6px; } main .content { padding: 1.5rem 5px; } body.GospelShares #tally-container .my-tally { padding: 10px 5px; } body.GospelShares #tally-container .tally label, body.GospelShares #tally-container .my-tally label { font-size: 9.5px; } }