html{ 
    font-family:sans-serif;}
/* PRELOAD CSS */
.loader-bg{
    display:grid;
    place-content:center;
    position:fixed;
    top:0;
    height:100%;
    width:100%;
    z-index:999999;}
.loader{
    /* animation properties */
    background-size:cover;
    background-position:center;
    height:70px;
    width:70px;
    /* animation-name:loader;
    animation-duration:0.7s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
    animation-timing-function:linear; */
    border-radius:10px;  
  }
/* @keyframes loader{ 
    from{ 
        background-size:cover;
        background-position:center;
        height:50px;
        width:50px;
    }
    to{ 
        background-size:cover;
        background-position:center;
        height:70px;
        width:70px;
    }
  } */
/* custom CSS */
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled){ 
    cursor:pointer;}
button,
input[type="button"],
input[type="reset"],
input[type="submit"]{ 
    cursor:pointer;
    -webkit-appearance:button;}
button{ 
    border:0;
    padding:0;}
button,
html input[type=button],
input[type=reset],
input[type=submit]{ 
    -webkit-appearance:button;
    cursor:pointer;}
button,
select{ 
    text-transform:none;}
button{ 
    overflow:visible;}
button,
input,
optgroup,
textarea{ 
    font:inherit;
    margin:0;}
.show{ 
    display:block;}
.container-fluid{ 
    padding:0 16px 0;}
.leftRight-space-16{ 
    margin:0 16px 0;}
img{ 
    vertical-align:middle;
    border-style:none;}
.transition{transition:all 0.5s;}
a{ 
    text-decoration:none!important;
    border-bottom:none!important;}
.homeResources-grid-containter,.homeResources-grid-containter2{
    border-radius:10px;
    border-radius:6px;
    position:relative;
    padding:20px 20px;}
/* .Resources-grid{
    border-radius:10px;
    margin-bottom:20px;
    position:relative;} */
#categories ol,#homeBodyContent ol{
    column-gap:5em;
    column-width:15em;
    padding-left:1.5em;
    margin:0;}
#archive-date, #expandANDdate{
    position:relative;
    visibility:hidden;}
.archive-date, .archive-date-summary{ 
    display:inline;
    font-family:Sanchez, Georgia, "Times New Roman", Times, serif;
    font-size:calc(9px + (24 - 16)*((100vw - 320px) / (1920 - 320)));
    font-weight:500;
    letter-spacing:0;
    line-height:17px;
    margin-top:20px;
    white-space:nowrap;}
/* mobile view */
#mobileHeader{ 
    display:none;}
#mobileHeader .mobileHeaderNav,
#homeHeader .mobileHeaderNav{ 
    display:-webkit-box;
    display:flex;
    place-items:center;
    min-height:60px;}
#mobileHeader .mobileLogoSize,
#homeHeader .mobileLogoSize{ 
    flex:1 1 auto;}
.mobileLogoSize a{
    border-bottom:none;}
#mobileHeader .mobileLogo,
#homeHeader .mobileLogo,.churchLOGO-img{ height:40px;}
.mobileDropdown{display:flex;}
.mobileButton{ 
    width:50px;
    height:35px;
    border-radius:0.25rem;}
.mobileButton{font-weight:600;}
#mobileHeader nav{display:inline-block;}
#headerLinks{ 
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;}
.mobile-homeHeaderNav{ 
    overflow:auto;
    text-align:left;
    min-width:230px;
    min-height:230px;
    height:100vh;
    border-radius:3px;}
.mobile-homeHeaderNav::-webkit-scrollbar{display:none;}
.mobile-headerLinks:last-of-type{border-bottom:none!important;}
.mobile-headerLinks a{ 
    text-decoration:none!important;
    font-weight:600;
    border-bottom:none;
    border-radius:0;}
.linkTitle{ 
    padding:14px 16px;
    display:block;}
.iconLink2{ 
    padding:14px 16px!important;
    padding-right:70px!important;
    width:-webkit-fill-available;}
.closeNavBar{ 
    position:absolute;
    top:13px;
    right:16px;
    border-radius:5px;}
.closeNavBar>div{
    width:1.5em;
    height:1.5em;
    padding:5px;}
.myDropdown{ 
    position:absolute;
    visibility:hidden;
    z-index:999;
    left:0;
    top:0;
    width:100%;}
.myDropdownDesk{
    position:absolute;
    visibility:hidden;
    z-index:1111111;
    right:0;
    top:3px;
    width:auto;}
.myDropdownDesk-content{
    position:relative;}
.header-links2{ 
    text-align:left;
    min-height:230px;
    height:auto;
    border-radius:10px;
    padding:0;
    margin:0;
    list-style:none;}
.slideInFromLeft{ 
    visibility:visible!important;
    animation:slideInFromLeft 400ms ease-in-out forwards;
    transform-origin:left center;}
@keyframes slideInFromLeft{ 
    0%{transform:scaleX(0);}
    100%{transform:scaleX(1);}}
.slideInFromRight{ 
    visibility:visible!important;
    animation:slideInFromRight 400ms ease-in-out forwards;
    transform-origin:right center;}
@keyframes slideInFromRight{ 
    0%{transform:scaleX(0);}
    100%{transform:scaleX(1);}}
.easeIn{ 
    visibility:visible!important;
    animation:easeIn 700ms ease-in-out forwards;
    animation-fill-mode:forwards;}
@keyframes easeIn{ 
    0%{left:-5em;}
    100%{left:0em;}}
.easeInTwo{ 
    visibility:visible!important;
    animation:easeInTwo 700ms ease-in-out forwards;
    animation-fill-mode:forwards;}
@keyframes easeInTwo{ 
    0%{top:-3em;}
    100%{top:0em;}}
.slideInFromTop{ 
    visibility:visible!important;
    animation:slideInFromTop 2000ms ease-in-out forwards;
    animation-fill-mode:forwards;}
@keyframes slideInFromTop{ 
    0%{top:-5em;}
    100%{top:0em;}}
.slideInFromBottom{ 
    visibility:visible!important;
    animation:slideInFromBottom 1000ms ease-in-out forwards;}
@keyframes slideInFromBottom{ 
    0%{bottom:-5em;}
    100%{bottom:0em;}}
.slideOut{
    animation:slideOut 200ms ease-in-out forwards;
    transform-origin:left center;}
@keyframes slideOut{ 
    0%{transform:scaleX(1);}
    80%{transform:scaleX(0.8);}
    100%{transform:scaleX(0);}}
@keyframes rotateMenu{ 
0%{transform:rotateX(-90deg);}
70%{transform:rotateX(20deg);}
100%{transform:rotateX(0deg);}}
/* desktopHeader CSS */
#desktopHeader{ 
    z-index:1;
    position:relative;}
.group-cats{
    display:flex;
    place-content:center;
    position:relative;}
.group-cats p{
    font-size:45%!important;
    position:absolute;
    margin:0 10px;
    bottom:0;
    display:flex;
    place-content:center;
    width:-webkit-fill-available;
    /* border-radius:4px; */
    z-index:1;}
@media only screen and (max-width:900px){ 
#desktopHeader{display:none;}
#mobileHeader{display:block!important;}
.mobile-homeHeaderNav{width:50vw;}
.masterNavButtonsToggle{ 
    height:auto;
    min-width:30px;}
.linkTitle{padding:30px 40px;}
.group-cats{
    display:block;
    position:relative;
    border-radius:4px;}
.group-cats p{
    font-size:45%!important;
    font-weight:600;
    position:absolute;
    margin:0 5px;
    top:0;
    right:0;
    display:flex;
    place-content:end;
    width:fit-content;
    height:-webkit-fill-available;
    border-bottom:none!important;}
#search-container{margin-top:80px!important;}}
@media only screen and (max-width:768px){ 
.linkTitle{padding:25px 30px;}}
@media only screen and (max-width:540px){ 
.mobile-homeHeaderNav{width:80vw;}
.linkTitle{padding:20px 25px;}}
@media only screen and (max-width:400px){ 
#mobileHeader .mobileLogo,
#homeHeader .mobileLogo,.churchLOGO-img{height:35px;}
.linkTitle{padding:20px 20px;}}
@media only screen and (max-width:300px){ 
.mobile-homeHeaderNav{
    width:70vw;
    min-width:130px;}}
.mobile-headerLinks{font-size:calc(18px + (24 - 16)*((100vw - 320px) / (1920 - 320)))!important;}
@media only screen and (min-width:1024px){ 
.homeBody-section{margin-top:0;}}
/* homeHeader */
#homeHeader{ 
    position:relative;
    height:auto;
    min-height:50px;}
.homeHeaderNav{ 
    display:flex;
    position:relative;
    overflow:visible;
    font-size:1.3em;}
.homeHeaderNav .churchLOGO{ 
    display:-webkit-box;
    display:flex;
    -webkit-box-align:center;
    align-items:center;
    flex:1 1 auto;}
.churchLOGO a{border-bottom:none;}
.headerUL{ 
    display:-webkit-box;
    display:flex!important;
    -webkit-box-align:center;
    align-items:center;
    -webkit-box-pack:start;
    justify-content:flex-start;}
div.header-links{ 
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    flex-flow:row nowrap;
    -webkit-box-pack:justify;
    justify-content:space-between;
    margin:0!important;
    padding:0;}
div.header-links{ 
    -webkit-box-pack:center;
    justify-content:center;}
.header-links-li{ 
    display:-webkit-box;
    display:flex;
    list-style-type:none;
    margin:0;}
.header-links-li>a{-webkit-box-align:center;}
.iconLink{ 
    display:-webkit-inline-box;
    display:inline-flex;
    -webkit-box-align:center;
    align-items:center;}
.header-links-li>a,.moreButton{ 
    font-weight:600;
    text-decoration:none!important;
    display:-webkit-box;
    display:block;
    font-size: calc(16px + (24 - 16)*((100vw - 320px) / (1920 - 320)))!important;
    padding:15px 10px;
    border-bottom:none;}
@media only screen and (max-width:541px){ 
.header-links-li>a{ 
    font-size:70%!important;
    padding:5px 2px;}}
@media only screen and (max-width:389px){ 
.header-links-li>a{ 
    font-size:63%!important;
    padding:4px 2px;}} 
.all-links{
    font-family:-system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight:bold;
    margin:10px 0 10px;
    padding:0;}
a.titles-links{
    font-family:-system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    text-transform:lowercase;
    font-size:14px;
    padding:6px 18px;
    border-radius:40px;
    border-bottom:none;
    letter-spacing:0px;
    font-weight:600;
    display:flex;
    width:fit-content;
    align-items:center;}
.titles-links::after{
    display:inline-block;
    padding:0 3px 0 8px;
    font-size:15px;
    content:"\0279E";
    -webkit-transition:transform 0.3s ease-out;
    -moz-transition:transform 0.3s ease-out;
    -ms-transition:transform 0.3s ease-out;
    -o-transition:transform 0.3s ease-out;
    transition:transform 0.3s ease-out;}
/* FOOTER CSS */
footer{ 
    font-size:.95em!important;}
/* CONTACT-SECTION CSS */
#Contact-section>div{
    padding:20px 0;}
.Contact-section p{ 
    display:grid;
    grid-template-columns:10% 90%;
    line-height:1.25;
    margin:1em 0!important;
    font-size:1em!important;
    overflow-wrap:break-word;}
.Contact-section .icons{ 
    font-size:15px;
    place-self:center start;
}
.footerLinks-header h3,.Contact-section h3{ 
    font-size:calc(18px + (24 - 16)*((100vw - 320px) / (1920 - 320)))!important;
    text-transform:uppercase;
    border-bottom:none;
    font-weight:700!important;
    margin:0;}
.Contact-section h5{ 
    border-bottom:none;
    font-size:calc(14px + (24 - 16)*((100vw - 320px) / (1920 - 320)))!important;
    font-weight:400!important;
    text-transform:capitalize;
    margin:0!important;}
.min-height{ 
    width:100%;}
ul.footerLinks-lists{ 
    padding:0;
    margin:0!important;}
.footerLinks-lists li{ 
    line-height:1.2;
    list-style-type:none;
    margin:12px 0;}
.footerLinks-lists p{ 
    font-size:16px;}
/* FOOTER LINKS CSS */
@media only screen and (max-width:1060px){
.Contact-section p{ 
    grid-template-columns:3% 97%;
    font-size:1em!important;}} 
@media only screen and (max-width:720px){ 
.footerLinks-header h3,
.Contact-section h3{ 
    margin:1em 0 0 0!important;}
.Contact-section p {
    grid-template-columns: 5% 95%;}
.visible-titles2{ 
    display:grid;
    grid-template-columns:80% 17%;
    min-height:30px;
    font-size:20px!important;}
.caret2{ 
    place-self:end end;
    transition:max-height 0.3s ease-out;}
.collapsible{ 
    cursor:pointer;
    border:none;
    outline:none;
    font-size:15px;}
.content{ 
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease-out;}}
@media only screen and (max-width:540px){ 
.footerLinks-header h3,
.Contact-section h3{
    border-bottom:none;}
.Contact-section p{ 
    grid-template-columns:6% 94%;
    font-size:0.9em!important;}
.visible-titles2{ 
    font-size:18px!important;}}
@media only screen and (max-width:380px){ 
.Contact-section p{ 
    grid-template-columns:8% 92%;}}
@media only screen and (max-width:300px){ 
.Contact-section p{ 
    grid-template-columns:10% 90%;
    font-size:0.75em!important;}}
@media only screen and (max-width:235px){ 
.Contact-section p{ 
    grid-template-columns:12% 88%;
    font-size:0.70em!important;}}
@media only screen and (min-width:721px){ 
.footerLinks-header h3,
.Contact-section h3{ 
    margin:48px 0 17px 0!important;}
.footerLinks-wrapper{ 
    display:grid;
    grid-template-columns:43% 36% 21%;}
.min-height{width:80%;}
.caret2{display:none!important;}}
@media only screen and (min-width:1060px){ 
.Contact-section-inner{ 
    display:grid;
    grid-template-columns:75% 25%;}
.footerLinks-wrapper{ 
    display:grid;
    grid-template-columns:46% 30% 24%;}}
.footerLinks-lists a{font-size:calc(16px + (24 - 16)*((100vw - 320px) / (1920 - 320)));}
/* lightANDdarkMODE toggle button */
#theme-toggle-container{
    position:fixed;
    bottom:20px;
    right:10px;
    z-index:999;}
.switch{
    position:relative;
    display:inline-block;
    width:60px;
    height:34px;}
.switch input{
    opacity:0;
    width:0;
    height:0;}
.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#a8a8a870;
    -webkit-transition:0.4s;
    transition:0.4s;
    border-radius:34px;}
.slider.round{border-radius:34px;}
.slider.round::before{
    content:"";
    position:absolute;
    width:26px;
    height:26px;
    left:4px;
    bottom:4px;
    background-color:#ffffff70;
    -webkit-transition:0.4s;
    transition:0.4s;
    border-radius:50%;}
input:checked + .slider.round{
    background-color:#44444470;}
input:checked + .slider.round::before{
    -webkit-transform:translateX(26px);
    -ms-transform:translateX(26px);
    transform:translateX(26px);}
/* Style the sun and moon icons */
#sun-icon,#moon-icon{
  position:absolute;
  font-size:18px!important;
  font-weight:600;
  top:50%;
  margin:0;
  padding:0!important;
  transform:translateY(-50%);}
#sun-icon{
  left:10px;
  color:var(--DM-vivid-orange);}
#moon-icon{
  right:10px;
  color:var(--black);}
.crossrefs h5{display:flex;}
.crossrefs h5::before{place-self:end;}

#Contact-section li, #Contact-section li:not(#context_menu.fillscreen details div li) {margin-left:0em;}