/* ==========================================================================
     Project:     Church of Christ Albany
     Date:        08/04/2025 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {
     --white: #ffffff;
     --light-beige: #fef6e6;
     --ronchi: #f4c557;
     --light-fern-frond: #eaf1e3;
     --fern-frond: #4c7023;
     --dark-fern-frond: #3d5b1c;
     --grey: #b3b3b3;
     --cod-grey: #1c1c1c;
     --dark-grey: #2a2a2a;
     --black: #000000;
}

/* ==========================================================================
     Typograpy
========================================================================== */

body {color: var(--black);font-family: "Karla", serif;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { margin-bottom: 2rem; color: var(--black);font-family: "Marcellus", serif; font-weight: 400; line-height: 1.4}
p {margin-bottom: 1.5rem;}

/* ==========================================================================
     Main Layout
========================================================================== */ 

html {scroll-behavior: smooth;}

body {background: var(--light-beige)}
body.cke_editable {background: var(--white)}

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--fern-frond); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:600;font-size:.875rem;z-index:99;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white)}

/* Header */
.header-wrapper {position: absolute; top: 0px; left: 0px; width: 100%; z-index: 2; font-size: 1rem;}
.headermenu a {text-decoration: none;display:block;transition: color 250ms ease;}
.headermenu .quicklinks a {color: var(--ronchi);}
.headermenu .quicklinks a:hover, .headermenu .quicklinks a:focus {color: var(--white)}

.headermenu .mainmenu {display:block; list-style:none; padding: 0px;margin: 0px;position: relative}
.headermenu .mainmenu li {display:inline-block;}

.headermenu .mainmenu > li {margin-bottom: -20px; padding-bottom:20px; position: relative;display:flex; align-items: center;}
.headermenu .mainmenu > li a {color: var(--white);font-weight: 600; text-align:center; line-height: 1.2}
.headermenu .mainmenu > li:hover > a, .headermenu .mainmenu > li a:focus  {color: var(--ronchi)}
.headermenu .mainmenu .btn {padding: 6px 25px}

.headermenu .dropdown {visibility: hidden; opacity: 0; transition: all 250ms ease; padding: 10px; top:calc(100% - 10px); text-transform: none;text-align:left; background: var(--light-beige); border-radius: 4px; width: 250px;position: absolute; left: 50%; -webkit-transform: translateX(calc(-50% - 10px)); transform: translateX(calc(-50% - 10px));}
.headermenu .dropdown::before {content:""; position: absolute; top: -7px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0px; height: 0px;border-left: 7.5px solid transparent;border-right: 7.5px solid transparent;border-bottom: 7.5px solid var(--light-beige);}

.headermenu .dropdown.active {visibility: visible;opacity: 1}
.headermenu .dropdown li {display:block;font-weight:600;font-size: 0.813rem;}
.headermenu .dropdown li:not(:last-child) {border-bottom: 1px solid rgba(0,0,0,.1)}
.headermenu .dropdown li a {padding: 5px 10px; transition: background .25s ease;border-radius: 4px; color: var(--cod-grey)}
.headermenu .dropdown li a:hover, .headermenu .dropdown li a:focus {background: var(--white);color: var(--cod-grey)}

.headermenu .mainmenu li:nth-child(1) .dropdown {left: 0px;right: unset;-webkit-transform: unset; transform: unset;}
.headermenu .mainmenu li:nth-child(1) .dropdown::before {left: 15%}
.headermenu .mainmenu li:nth-last-child(1) .dropdown {right: 0px;left: unset;-webkit-transform: unset; transform: unset;}
.headermenu .mainmenu li:nth-last-child(1) .dropdown::before {right: 15%; left: unset}

/* Offcanvas */
.offcanvasmenu { position:fixed; visibility:hidden; opacity: 0;height: 100%; width: 100%; top: 90px; padding-top: 10px; left: 0px; background: var(--white); overflow-x:hidden; overflow-y:auto;}
.offcanvas-open .offcanvasmenu {transition: opacity 250ms ease; visibility: visible;opacity: 1}

.offcanvasmenu .bg-tan {background: var(--light-beige); border-bottom: 2px solid var(--fern-frond); padding: 10px 0px; margin-bottom: 5px;display: -webkit-box; display: -webkit-flex; display: flex; align-items:center;}
.offcanvasmenu form {position: relative; height: 35px;width: 100%;}
.offcanvasmenu form .btn {color: var(--black); width: 35px; height: 35px; padding: 0px; position: absolute; top: 0px;right: 15px; border-radius: 0px;background:none;font-size: .813rem}
.offcanvasmenu form .btn:hover, .offcanvasmenu form .btn:focus {color: var(--fern-frond)}
.offcanvasmenu form input {height: 35px; position: absolute; top: 0px; font-size: .875rem; left: 15px; width: calc(100% - 30px);  border: 1px solid var(--grey); border-radius: 4px; padding: 0px 35px 0px 15px}
.offcanvasmenu form input::-ms-clear {display:none}

.offcanvasmenu ul {list-style:none; padding: 0px;margin: 0px;}
.offcanvasmenu .mainmenu {font-weight: 700; }
.offcanvasmenu li {position: relative; }
.offcanvasmenu li a[aria-haspopup] {margin-right: 55px;}
.offcanvasmenu li .fa-angle-down {font-size: 1rem; transition: transform 200ms ease-in-out}
.offcanvasmenu li .fa-angle-down.rotate {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}
.offcanvasmenu .mainmenu a {color: var(--black); display: block; padding: 15px;text-decoration: none; display: -webkit-box; display: -webkit-flex; display: flex; align-items:center;}
.offcanvasmenu .mainmenu a:hover, .offcanvasmenu .mainmenu a:focus {color:var(--fern-frond); }
.offcanvasmenu .mainmenu > li {border-bottom: 1px solid var(--light-beige)}

.offcanvasmenu .btn-toggle-dropdown {position: absolute; top: 10px; right:15px; width: 35px; height:35px;padding: 0px;border-radius: 4px; border: none; background: var(--light-beige); color: var(--cod-grey)}
.offcanvasmenu .btn-toggle-dropdown:hover, .offcanvasmenu .btn-toggle-dropdown:focus {background: color-mix(in srgb, var(--light-beige) 90%, var(--ronchi));}

.offcanvasmenu .dropdown {border-left: 2px solid var(--fern-frond); margin: 0px 15px 15px 15px;font-weight: 600;display:none;font-size: .875rem;}
.offcanvasmenu .dropdown.active {display:block}
.offcanvasmenu .dropdown a {padding: 10px;}
.offcanvasmenu .mainmenu > li:last-child a {margin: 15px;background: var(--light-beige); font-weight: 700}
.offcanvasmenu .mainmenu > li:last-child a:hover, .offcanvasmenu .mainmenu > li:last-child a:focus {background:color-mix(in srgb, var(--light-beige) 90%, var(--ronchi)); color: var(--black)}
.offcanvasmenu .quicklinks {margin: 15px}
.offcanvasmenu .quicklinks ul {margin-bottom: 15px;}
.offcanvasmenu .quicklinks .fab {font-size: 1.125rem; padding: 5px;}

.offcanvasmenu::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
.offcanvasmenu::-webkit-scrollbar-track-piece {margin: 15px 0px;}
.offcanvasmenu::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}

.btn-toggle-offcanvas {margin: 0px; border-radius: 0px; height: 36px;padding:5px;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity;text-transform:none;color:inherit;border:0;}
.hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:24px;height:2.5px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:3.5px;background-color:var(--white); right: 0px}
.hamburger-inner{top:50%;display:block;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
.hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-8px;}
.hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.685,.19); bottom:-8px;}
.btn-toggle-offcanvas.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}
.btn-toggle-offcanvas.active .hamburger-inner:before{top:0;transition:top .1s ease,opacity .1s ease .12s;opacity:0; width: 100%;}
.btn-toggle-offcanvas.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg);width: 100%;}

/* Footer */
.footer-wrapper {background: linear-gradient(to bottom, var(--light-beige) 0%, var(--white) 50%);}
.footer-wrapper .list-inline-item:not(:last-child) {border-right: 1px solid var(--ronchi);padding: 0px 10px}
.footer-wrapper .fab {font-size: 1.5rem}

/* ==========================================================================
     Components
========================================================================== */ 

/* Links */
a {color: var(--fern-frond);text-decoration: underline;}
a:hover { text-decoration: none;color: var(--fern-frond)}

/* Flex */
.gap-30 {gap: 30px}
.gap-15 {gap: 15px}

/* Backgrounds */
.bg-cod-grey {background: var(--cod-grey);}
.bg-cod-grey a:hover, .bg-cod-grey a:focus {color: var(--white)}
.bg-light-beige {background: var(--light-beige)}
.bg-arches {position: relative;overflow:hidden;}
.bg-arches::before {content:""; position: absolute; inset: 0px; background: url(/img/bg-arches.svg); opacity: .08; background-size: 50%}
.bg-arches::after {content: "";position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events:none; background: radial-gradient(circle at center, rgba(255, 255, 255, .75) 0%, transparent 80%);z-index: 0; width: 400px; height: 400px;margin:auto}
.bg-gradient-white {background: linear-gradient(0deg,rgba(254, 246, 230, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(254, 246, 230, 1) 100%);}

/* Images */
img {max-width: 100%; height: auto}
p:has(img:only-child) {margin: 0px}

.aspect-ratio-16-9 {aspect-ratio: 16 / 9; object-fit: cover;}
.aspect-ratio-1-1 {aspect-ratio: 1 / 1; object-fit: cover;}

/* Forms */
.custom-form input, .custom-form textarea {background: var(--light-fern-frond);border:none;border-radius: 30px;min-height: 50px}
.custom-form input::placeholder, .custom-form textarea::placeholder {color: var(--black);font-size: .875rem;}
.custom-form input::placeholder {padding: 0px 0px 0px 10px}
.custom-form textarea::placeholder  {padding: 10px 0px 0px 10px}

input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration {-webkit-appearance:none;}

/* Heros */
.hero, .masthead {position: relative;z-index: 0; background: var(--dark-grey); border-radius: 0px 0px 50px 50px}
.hero video { mix-blend-mode: soft-light; width: 100%; height: 100%; object-fit: cover;z-index: 0;position: absolute; z-index: 0; top: 0px; left: 0px;background: var(--dark-grey); border-radius: 0px 0px 50px 50px}
.hero-caption {position: relative;z-index: 2; opacity: 0; transition: opacity 500ms ease;color: var(--white); max-width: 560px}
.hero-caption .btn {width: 160px}
.hero-caption .h1 {font-size: clamp(2.5rem, 5vw + 1rem, 4rem);}
.hero .hero-loading {position: absolute; z-index: 1; transform: translate(-50%, -50%); left: 50%; top: 50%;color: var(--grey)}

.hero.video-loaded .hero-caption {opacity: 1}
.hero.video-loaded .hero-loading {display:none}

.hero .btn-toggle-video {position: absolute;color: var(--white);  z-index: 1; bottom: 20px; right: 20px; background: rgba(0,0,0,.9);border-radius: 50%; width: 25px; height: 25px; font-size: .625rem;opacity: .5; transition: 200ms opacity ease;display:flex; align-items:center; justify-content:center}
.hero .btn-toggle-video:hover, .hero .btn-toggle-video:focus {opacity: 1; text-decoration: none;}

/* Mastheads */
.masthead {position: relative;z-index: -1; background: var(--dark-grey); border-radius: 0px 0px 50px 50px; text-align:center;}
.masthead, .masthead .container {min-height: 280px}
.masthead h1 {color: var(--white);}
.masthead img {mix-blend-mode: soft-light; width: 100%; height: 100%; object-fit: cover;z-index: 0;position: absolute; z-index: 0; top: 0px; left: 0px;background: var(--dark-grey); border-radius: 0px 0px 50px 50px}

/* Breadcrumbs */
.breadcrumb {padding: 0px; background:none; font-size: .813rem}

/* Slideshows */
.slick-track {display: flex !important;}
.slick-slide {height: inherit !important}
.slick-dots {position: relative; list-style:none; display: flex; justify-content: center;padding: 0px;}
.slick-dots li {margin: 0px 2px}
.slick-dots button {width: 7.5px; height: 7.5px; padding: 0px; background: var(--fern-frond); opacity: .25; border:none; border-radius: 50%}
.slick-dots .slick-active button {opacity: 1}

/* Indexes */
.z-0 {z-index: 0}
.z-1 {z-index: 1}

/* Radii */
.rounded-xl {border-radius: 15px}

/* ==========================================================================
     CMS Classes
========================================================================== */

/* Text */
.text-xxs {font-size: .688rem}
.text-xs {font-size: .75rem}
.text-sm {font-size: .85rem;}
.text-md {font-size: 1.063rem;}
.text-lg {font-size: 1.25rem;}

.text-clamp-2 {text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 2; overflow: hidden; }
.text-clamp-4 {text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 4; overflow: hidden; }

.leading-none {line-height: 0}
.leading-1-1 {line-height: 1.1}
.leading-1-0 {line-height: 1}

.text-light-beige {color: var(--light-beige)}
.text-fern-frond {color: var(--fern-frond)}
.text-ronchi {color: var(--ronchi)}
.text-eyebrow {text-transform: uppercase;color: var(--fern-frond); margin-bottom: 1rem; font-size: 1.025rem}
.text-grey {color: var(--grey)}
.text-black {color: var(--black)}

.font-weight-semibold {font-weight: 600;}
.font-marcellus {font-family: "Marcellus", serif; font-weight: 400}

/* Buttons */
.btn-fern-frond, 
.btn-outline-fern-frond, 
.btn-light-beige, 
.btn-outline-light-beige, 
.btn-arrow-link, 
.btn-arrow-circle, 
.cms-slideshow .btn-primary, 
.cms-form .btn-primary, 
form[name=frmSearch] .btn-primary { border:none; text-decoration:none; padding: 6px 25px; transition:all 250ms ease; position: relative;border-radius: 3px; text-align:center; font-weight:400; font-size: .875rem; background:none;}

.btn-fern-frond {background: var(--fern-frond); color: var(--light-beige)}
.btn-fern-frond:hover, .btn-fern-frond:focus {background: color-mix(in srgb, var(--fern-frond) 50%, var(--black)); color: var(--light-beige)}

.btn-outline-fern-frond {border: 1px solid var(--fern-frond); color: var(--fern-frond)}
.btn-outline-fern-frond:hover, .btn-outline-fern-frond:focus {border: 1px solid var(--dark-fern-frond); color: var(--dark-fern-frond)}

.btn-light-beige {background: var(--light-beige); color: var(--cod-grey)}
.btn-light-beige:hover, .btn-light-beige:focus {background: color-mix(in srgb, var(--light-beige) 50%, var(--black)); color: var(--cod-grey)}

.btn-outline-light-beige {border: 1px solid var(--light-beige); color: var(--light-beige)}
.btn-outline-light-beige:hover, .btn-outline-light-beige:focus {border: 1px solid var(--white); color: var(--white)}

.btn-arrow-link {font-size: .875rem; color: var(--fern-frond); position: relative; padding: 0px 20px 0px 0px}
.btn-arrow-link::after {content: "\f061"; font-family: "Font Awesome 5 Free";font-weight: 900; position: absolute;right: 0;top: 50%;transform: translateY(-50%);font-size: 0.875em;}
.btn-arrow-link:hover, .btn-arrow-link:focus {color: color-mix(in srgb, var(--fern-frond) 50%, var(--black));}

.btn-arrow-circle {display:block; height: 50px; width: 50px; border-radius: 50%; border: 1px solid var(--grey); color: var(--cod-grey); display:flex; align-items: center; justify-content: center;font-size:1.125rem; background:none}
.btn-arrow-circle:hover, .btn-arrow-circle:focus {background: var(--white)}

/* ==========================================================================
     CMS Components
========================================================================== */

/* Use .btn-fern-frond's colors for cms elements */
.cms-slideshow .btn-primary, .cms-form .btn-primary, form[name=frmSearch] .btn-primary {background: color-mix(in srgb, var(--fern-frond) 90%, var(--black)); color: var(--light-beige)}
.cms-slideshow .btn-primary:active, 
.cms-slideshow .btn-primary:hover, 
.cms-slideshow .btn-primary:focus,
.cms-form .btn-primary:active, 
.cms-form .btn-primary:hover, 
.cms-form .btn-primary:focus,
form[name=frmSearch] .btn-primary:hover,
form[name=frmSearch] .btn-primary:focus, 
form[name=frmSearch] .btn-primary:active {background: var(--fern-frond) !important; border-color: transparent !important; color: var(--light-beige); outline: none !important; box-shadow: none !important; -webkit-outline: none !important}

/* Accordions */
.cms-accordion .card {background:none; border-radius: 0px; border: none; border-bottom: 2px solid rgba(165,163,162,0.25) !important;}
.cms-accordion .card:first-child {border-top: 2px solid rgba(165,163,162,0.25);}
.cms-accordion .card-header {transition: color 250ms ease;position: relative;border-radius: 0px; background:none;border:none; padding: 25px 50px 25px 50px!important; color: var(--fern-frond); font-weight: 700;}
.cms-accordion .card-header:hover, .cms-accordion .card-header:focus {text-decoration:none; cursor: pointer}
.cms-accordion .card-header::before {transition: transform 250ms ease; background: url(/img/icon-plus.svg) center center no-repeat;background-size: 100% 100%; width: 25px; height: 25px; content:""; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.cms-accordion .card-header[aria-expanded=true] { color: var(--fern-frond); border-bottom: none}
.cms-accordion .card-header[aria-expanded=true]::before {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); }
.cms-accordion .card-body a {color: var(--fern-frond);}
.cms-accordion .card-body p {color: var(--black);}
.cms-accordion .card-body {padding: 0px 30px 30px 30px; margin-bottom: 20px;position: relative; margin-top: 20px; overflow:hidden /* This last property will grow this element with it's floated children */ }
.cms-accordion .card-body::after {width: 4px; background: var(--fern-frond); content: ""; position: absolute; top: 0px; left: 0px; bottom: 30px; }
.cms-accordion .card-body *:last-child {margin-bottom: 0px}
.cms-accordion .collapsing {transition-duration: 500ms; transition-timing-function: ease-in-out;}

/* Tabs */
.cms-tabs .nav {margin-bottom: 0px !important}
.cms-tabs .nav p:hover {cursor: pointer}
.cms-tabs .nav-pills .nav-link {background: var(--black); color: var(--white); font-weight: bold;border-radius: 0px; border:none; padding: 5px 25px}
.cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: var(--light-beige);color: var(--black); }
.cms-tabs .tab-content {background: var(--light-beige); padding: 1.5rem;}
.cms-tabs .tab-content *:last-child {margin-bottom: 0px}

/* Calendar */
.cms-calendar .text-primary {color: var(--fern-frond) !important}
.cms-calendar .bg-primary {background: var(--fern-frond) !important}

/* Forms */
form[name=frmSearch] .btn-primary {border-radius: 0px}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     /* Type */
     .h1, h1 {font-size: 2.5rem;}
     .h2, h2 {font-size: 2rem;}
     .h3, h3 {font-size: 1.75rem;}
     .h4, h4 {font-size: 1.5rem;}
     .h5, h5 {font-size: 1.25rem;}
     .h6, h6 {font-size: 1.0125rem}

     /* Header */
     .header-wrapper {height: 90px}
     .header-wrapper img {width: 120px}
     .headermenu .quicklinks {width: 100%; justify-content: space-between;}
     .offcanvas-open {overflow:hidden}

     /* Heros */
     .hero, .hero .container {min-height: 500px}
}

@media (min-width: 576px) {    

}

@media (min-width: 768px) {	
     /* Type */
     .h1, h1 {font-size: 3rem;}
     .h2, h2 {font-size: 2.5rem;}
     .h3, h3 {font-size: 2.25rem;}
     .h4, h4 {font-size: 2rem;}
     .h5, h5 {font-size: 1.5rem;}
     .h6, h6 {font-size: 1.1875rem}

     /* Header */
     .header-wrapper {height:auto}
     .headermenu .quicklinks {width: auto; justify-content: start;}
     .headermenu .mainmenu > li > a {padding: 0px 15px;}
     .offcanvas-open {overflow:unset}
     
     /* Heros */
     .hero, .hero .container {min-height: 700px}
}

@media (min-width: 850px) {	
     /* Header */
     .header-wrapper img {width: 175px}
     .headermenu .mainmenu > li > a {padding: 0px 25px;}
}

@media (min-width: 992px) {	

}

@media (min-width: 1200px) {

}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}