@charset "utf-8";

.herobg {background-position: top center; position: relative;}



/************************* UNIVERSAL ****************************/

/********************* LAYER CONTROL ******************/
header {z-index: 2025;}
header .wide {z-index: 2024;}
.burger-nav .mainlinks,
.burger-nav .nav-links { z-index: 2023; }
.dropdown-menu { z-index: 2022; }
.burger-nav .bottom { z-index: 2021;}
.burger-nav { z-index: 2020; }
.burger-nav .goosed {z-index: 2019;}
.burger-nav .countdown {z-index: 2018;}
.issue {z-index: 206;}
.palette-sticker, .dark-box:has(form) {z-index: 500; }
.goose-bubble, .office .fullimg img, .homeoffice .fullimg img, .photography .fullimg img, .goose-lib1, .community .communityimg, .community .communityimg img{z-index: 500; }
.historian, .const, .cheque {z-index: 401;}
.medic, .gavel {z-index: 401;}
.bigbutton, .button, .button-m, .darkbutton  {z-index: 500; position: relative;}
.adgoose {z-index: 401;}
.ribbon .inner, .art-title {z-index: 400;}
article, .white, .whitespace {z-index: 300; position: relative;}
.no-v-anim {z-index: 300;position: relative;}
.divider{z-index: 300;position: relative;}
.slide.is-active .cover-card, .flip-icon {z-index: 10;}


* {margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: border-box;}
img, svg {max-width: 100%;}
a {text-decoration: none; font-weight: 500; }
.hide, .hidden {display: none;}
.show  {display:grid;}
.showflex, .flex  {display:flex;}
html { scroll-behavior: smooth; }
li {margin:0 0 5px 0; }
body {font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    background-color: var(--white);color: var(--dark); line-height: 1.5;
    min-height: 100vh; height:100%; margin:0; position: relative;
    font-size: 0.8em; letter-spacing: 0.06em; overflow-x: hidden; 
    min-height: 100vh;display: flex;
  flex-direction: column;}
html {background-color: var(--darkbase); color: var(--light); height:100%;}
main {margin-top: 54px; max-width: 100vw; flex-grow: 1;}
ul {padding-left: 20px; margin-bottom: 10px;}
[id] {scroll-margin-top: 54px;}
:root {
    --inactive-color: #5a5e61;
    --disabled1: #5A5E61;
    --disabled2: #B6B6B5;
    --contain: 1200px;}
.constrained {max-width: 700px; margin: 0 auto;}
.darkbase {background-color: var(--darkbase);}
.contain {max-width: var(--contain); margin: 0 auto 0 auto; }
.noscroll {overflow: hidden;}
.relative {position: relative;}
.centered {display: flex; justify-content: center; gap:10px; padding:0 0px 0px 0px; text-align: center;}
.bottom {align-items: end;}
.wrap {padding:0 20px; margin: 0 auto;}
.inline-block {display: inline-block;}
.buffer {padding: 50px 0 80px 0;}
.section {padding:60px 20px 50px 20px;}


/********************* FONT CONTROL ******************/
@font-face {font-family: CinzelBold; src: url(../fonts/Cinzel/Cinzel-SemiBold.woff2);}
.banner p.home, p.home{font-family: CinzelBold, Times, serif; font-size: 1.1rem;filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}
.banner h1, .banner-grid h1 {filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5)); font-family: CinzelBold, Times, serif;}
h1, article h2, article h1, article .banner h1, article .title-area h1 {font-family: CinzelBold, Times, serif; font-size: 1.5rem; text-transform: uppercase;
  letter-spacing: 0.05em ; }
h2 {font-family: CinzelBold, Times, serif; font-size: 1.3rem; text-transform: uppercase;
  letter-spacing: 0.05em ;}
h3.Cinzel, .search-top, .ribbon h2 {font-family: CinzelBold, Times, serif; text-transform: uppercase; font-size: 1.1rem; }
.Cinzel {font-family: CinzelBold, Times, serif;}
.ribbon .inner .contain h3 {font-size: 1.1rem;}
.ribbon p {font-size: 0.8rem;}
.upper {text-transform: uppercase; letter-spacing: 0.1em;}
.burger-nav .mainlinks a {font-size: 1.2em; }
a {color: var(--light);}
a.dark {color: blueviolet !important; text-decoration: underline;}
a.link {color: rgb(0, 217, 255) !important; text-decoration: underline;}
.times { font-family: 'Georgia', serif; color: #333; }
.red {color: #c01818;}
.killer-header { color:#c53030; text-align: center; font-weight: 900; font-size: 2rem; margin-bottom: 10px; letter-spacing: 2px; border-bottom: 2px solid #c53030; }
.center {text-align: center; text-transform: uppercase; padding: 10px;}

/********************* HEADER BAR ******************/
header {position: fixed; top: 0; width: 100%; height:54px; }
.ribbon header {height: auto;}
header .logo {width:145px; min-height:19px; flex-shrink: 0;}
header .centered {display: flex; align-items: center; height: 100%; justify-items: center; }
header .wide {border-bottom: 1px solid var(--light); background: var(--darkbase);
  box-shadow: inset 0px -15px 25px -25px var(--light);display: flex; align-content: center;
  padding:10px 10px 0 10px; gap:10px; width: 100%; justify-content: space-between; position: relative;height:54px;}
header .left, header .right {display: flex; align-content: center; gap:10px;}
.mainnav, .estop{display: none;}
svg.estop path, svg.logotop path, .goosed svg path {fill:var(--light);}
.burgernav, nav {display: flex;}
header .tabtop svg path {fill: var(--darkbase);}


/********************* NAV ******************/
.burger-nav .mainlinks a {margin: 0 0 0 0; padding: 5px 20px; min-height: 52px; }
button.tabtop {display: flex;flex-direction: column; cursor: pointer; height: 100%; border-bottom: none; }
.burger-line {width: 100%;  height: 4px;background: var(--darkbase);  border-radius: 2px;transition: all 0.6s ease;}
.burger-menu.active .burger-line:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.burger-menu.active .burger-line:nth-child(2) {transform: rotate(-45deg);}
.burger-menu.active .burger-line:nth-child(3) {opacity: 0;transform: translateX(-20px);}
.burger-nav.active {top: 52px; visibility: visible; }
.burger-nav {width: 100%; padding: 18px 20px; background-color: var(--darkbase);
    position: fixed ; top: -100%; left: 0; height: calc(100vh - 52px); max-height: 100vh;
    visibility: hidden; transition: top 0.6s ease, opacity 0.6s ease, visibility 0.6s ease;
    box-shadow: -7px 7px 6px rgba(32,5,58,0.3);display:block;align-content: stretch;  overflow: hidden;}
.burger-header{padding-top: 10px;}
.burger-nav .logotop {max-width: 80%; margin: 0 auto;}
.burger-nav .logotop {display: flex; flex-direction: column; align-content: center;}
.burger-nav .mainlinks {display: flex; align-items: center;}
.burger-nav .mainlinks {margin: 15px auto;}
.burger-nav .mainlinks, .burger-nav .dropdown-menu  {width: 300px; flex-direction: column; }
.burger-nav .nav-links, .burger-nav .nav-item {width: 300px;margin: 0 auto;display: flex; flex-direction: column;align-items: center; }
.nav-links {list-style: none;box-shadow: 0 4px 6px rgba(0,0,0,0.3); line-height: normal; border: 1px solid var(--light); }
ul.nav-links {padding-left: 0px !important;}
.nav-links ul, .nav-links li { margin: 0 !important; padding: 0 !important; }
.burger-nav .nav-links {display: flex; flex-direction: column;border-radius: 8px 8px 8px 8px; width: 250px; align-items: center;}
.mainnav .nav-links {display: flex; border-bottom: none; border-radius: 8px 8px 0 0;margin: 0 auto; width: fit-content;}
.mainnav .nav-item { border-right: 1px solid var(--light); }.mainnav .nav-item:last-child {border-right: none;}
.nav-item { position: relative;}
.nav-item.solo .nav-link { padding: 0 23px; }
.mainnav .nav-item.tab1 { width: 165px; }
.mainnav .nav-item.tab2 { width: 185px; }
.mainnav .nav-item.tab3 { width: 170px; }
.mainnav .nav-item.tab4 { width: 145px; }
.mainnav .nav-item:first-child .nav-link { border-top-left-radius: 8px; }
.mainnav .nav-item:last-child .nav-link { border-top-right-radius: 8px; }
.nav-item:nth-child(1) .nav-link img { transform: rotate(18deg); }
.nav-item:nth-child(2) .nav-link img { transform: rotate(-14deg); }
.nav-item:nth-child(3) .nav-link img { transform: rotate(32deg); }
.nav-item:nth-child(4) .nav-link img { transform: rotate(-25deg); }
.nav-link {display: flex; align-items: center;
gap: 5px; text-decoration: none;color: var(--darkbase); padding: 0px 10px; line-height: normal;
cursor: pointer;min-width: max-content; transition: background-color 0.3s ease, color 0.3s ease;}
.burger-nav .nav-link {border-bottom: 1px solid var(--darkbase);}.burger-nav .nav-link:last-child {border-bottom:none;}
.burger-nav .nav-link {width: 250px;border:1px solid var(--light);}
.burger-nav .nav-item:first-child .nav-link {border-top-left-radius: 8px; border-top-right-radius: 8px;}
.burger-nav .nav-item:last-child .nav-link{border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.mainnav .nav-link {justify-content: center;height: 100%;}
.nav-link img, .dropdown-menu img {transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease; display: inline-block;}
.burger-nav .dropdown-menu {width: 300px;position: relative;left: 0;margin: 0 auto;display: none;margin-left: -25px;}
.mainnav .dropdown-menu {position: absolute; top: 100%; left: 0; border-radius: 0 0 8px 8px;}
.burger-nav .dropdown-menu {border-radius: 8px 8px 8px 8px;}
.dropdown-menu {display: none;
    width: 100%; background-color: var(--darkbase); list-style: none; border: 1px solid var(--light);
    overflow: hidden; filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}
.dropdown-menu li a {display: flex; align-items: center; padding-left: 10px; text-decoration: none;
    color: var(--light); transition: background-color 0.3s ease, color 0.3s ease; min-width: max-content;}
.dropdown-menu li a:hover {background-color: var(--light); color: var(--darkbase);}
.dropdown-menu li img {opacity: 0; transform: rotate(var(--start)); }
.dropdown-menu li:nth-child(1) img { --start: -120deg; --end: 45deg;   }
.dropdown-menu li:nth-child(2) img { --start: 10deg;   --end: 195deg;  }
.dropdown-menu li:nth-child(3) img { --start: 160deg;  --end: -110deg; }
.dropdown-menu li:nth-child(4) img { --start: -250deg; --end: 25deg;   }
.dropdown-menu li:nth-child(5) img { --start: -0deg; --end: 90deg;   }
.dropdown-menu li a:hover img { opacity: 1;transform: rotate(var(--end)); }
.burger-nav .bottom {position: absolute; bottom: 0; left: 0;width: 100%;  padding:0 0 20px 0;}
.burger-nav .goosed {display: flex; flex-direction: column; align-items: center;}
.burger-nav .strip {position:relative; border-top: 1px solid var(--light); border-bottom: 1px solid var(--light);
  margin: 15px 0 10px 0; width: 100%; display:flex; flex-direction: column; align-items: center; }
.burger-nav .strip p {text-align: center; max-width: 300px; padding:5px;}
.burger-nav .strip .goosehead { position: absolute; bottom:49px; left:5%;}
.bottom .goxit {display: none;}
.mainnav .nav-item:hover .dropdown-menu { display: block; }
.burger-nav .nav-item:hover .dropdown-menu { display: flex; }
.nav-item:hover > .nav-link img {transform: rotate(180deg);}
.nav-item:hover .nav-link {background-color: var(--darkbase); color: var(--light); border-bottom-left-radius: 0;}
.counter:has(#burger-days) p, .counter:has(#burger-hours) p{min-width: 55px;}

/********************* TAB LINKS ******************/
.tabtop, .tabbot, .tabbotrans {padding:4px 9px; border-right: 1px solid var(--light); border-left: 1px solid var(--light); display: flex; align-items: center; gap:4px; min-width: 48px; justify-content: center; transition: all 0.6s ease;}
.tabtop { border-top-left-radius: 8px; border-top-right-radius: 8px; border-top: 1px solid var(--light);}
.tabbot, .tabbotrans { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid var(--light);}
.tabtop svg, .tabbot svg, .tabbotrans svg {width:30px;}
.tabbot svg path, svg.logo path, svg.mainlogo path, .tabbotrans svg path {fill: var(--light);}
.tabtop:hover svg path, .tabbot:hover svg path, .tabbotrans:hover svg path {fill: var(--darkbase); transition: all 0.6s ease;}
.tabtop:hover, .tabbot:hover, .tabbotrans:hover  {color:var(--darkbase);}
.rightbot .tab, .righttop .tab{background-color: var(--mid70); display: flex; align-items: center; gap:10px;
   padding:4px 15px; color: var(--darkbase); font-weight: bold; text-align: right; }
.rightbot .tab svg path, .righttop .tab svg path {fill: var(--darkbase);}
.rightbot, .righttop{ display: flex;justify-content: end;}
.righttop .tab{border-bottom-left-radius: 8px; cursor: pointer;}
.rightbot .tab{border-top-left-radius: 8px; cursor: pointer;}
.rightbot .tab:hover svg path, .righttop .tab:hover svg path {fill: var(--darkbase);}
.rightbot .tab:hover, .righttop .tab:hover{background-color: var(--mid); color: var(--darkbase);}

/********************* BUTTONS ******************/
.bigbutton {background-color: var(--darkbase); color: var(--light); border: 2px solid var(--light); border-radius: 30px; width:100%; display: flex; align-items: center; justify-content: center; gap:10px; padding: 8px 20px; font-size: 1.5rem; font-weight: 700; transition: all 0.3s ease;}
.bigbutton svg path {fill: var(--light); transition: all 0.6s ease;}
.bigbutton svg {width: 40px;}
.bigbutton:hover svg path {fill: var(--darkbase);transition: all 0.6s ease;}
.bigbutton:hover {color: var(--darkbase); background-color: var(--mid); border: 2px solid var(--darkbase); transform: scale(1.1); }

article .darkbutton, article .darkbutton span {font-family: 'Segoe UI', Helvetica, Arial, sans-serif !important;}
.darkbutton:hover .tail-rect {fill: var(--darkbase); transform: scaleX(2); }
.darkbutton:hover .head-path {  fill: var(--darkbase); transform: translateX(20px); }
.darkbutton:hover svg path {fill:var(--darkbase);}
.darkbutton:has(.arrow-left) {padding:4px 40px 4px 25px;}
.arrow-left .tail-rect {transform-origin: right;}
.arrow-svg { height: 30px; overflow: visible; vertical-align: middle;}
.tail-rect {fill: var(--light); transition: all 0.6s ease; transform-origin: left;}
.head-path {fill: var(--light);transition: all 0.6s ease;}
.darkbutton:hover .arrow-left .head-path {transform: translateX(-20px); }
.darkbutton, .collection {background-color: var(--darkbase); color: var(--light); border: 2px solid var(--mid); border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; gap:5px; padding: 4px 25px 4px 25px; min-height: 45px; transition: all 0.3s ease; font-weight: 700;}
.darkbutton:has(.arrow-svg) {padding: 4px 25px 4px 40px;}
.darkbutton:has(.arrow-left) {padding: 4px 40px 4px 25px;}
.darkbutton:hover, .collection:hover {color: var(--darkbase);  background-color: var(--light);}
.darkbutton svg path, .collection svg path {fill: var(--light);}
.collection.maxed {min-height: 45px;}
.collection {display: flex; cursor: pointer; align-items: center; gap: 8px;  }
.collection-list {display: grid; grid-template-rows: 0fr; opacity: 0;transition: grid-template-rows 0.5s ease, opacity 0.3s ease, margin 0.5s ease; gap: 15px;}
.collection-list > * {overflow: hidden;min-height: 0;}
#collectionWrapper {display:flex; height: 45px; max-height: 45px; transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;overflow: hidden; flex-direction: column; gap: 15px !important;}
[data-expanded="true"] .collection-list { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
[data-expanded="true"]#collectionWrapper {height:325px; max-height:325px;transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
[data-expanded="true"] .collection svg {transform: rotate(180deg);transition: transform 0.4s ease; }
.collection:hover svg path {fill: var(--darkbase);}

.button {border-radius: 30px; max-width: max-content; display: flex; align-items: center; justify-content: center; gap:5px; padding: 4px 20px; min-height: 45px;}
.button {background-color: var(--mid); color: var(--darkbase); border: 2px solid var(--darkbase);  transition: all 0.3s ease; transition: background-color 0.4s ease, transform 0.2s ease;}
.button:hover svg path{fill: var(--mid); transition: all 0.6s ease;}
.button:hover {color: var(--mid); background-color: var(--darkbase); border: 2px solid var(--light);}

.buttongroup .doublebutton, .inline {display: flex; flex-direction: row; gap:15px;}
.inline .button span, .inline .darkbutton span{display: none; }
.buttongroup {display: flex; flex-direction: column; gap:15px;}

.button svg path, .button2 svg path, .button-m svg path, .collection svg path{fill: var(--darkbase);}
.button-m.disabled, .button-m.disabled:hover {background-color: var(--disabled1); color:var(--disabled2); pointer-events: none;}
.button2 {background-color: var(--mid); color: var(--darkbase); border: 2px solid var(--darkbase); border-radius: 30px; max-width: max-content; display: flex; align-items: center; justify-content: center; gap:5px; padding: 4px 25px; min-height: 45px; text-align: center;}
.button-m {background-color: var(--mid); color: var(--darkbase); border: 2px solid var(--darkbase); border-radius: 30px; max-width: max-content; align-items: center; justify-content: center; gap:5px; padding: 4px 25px; min-height: 45px; text-align: center; align-content: center;}
.button2.maxed , .button-m.maxed, .collection.maxed {max-width: 100%; width:100%; min-height: 45px;}
.button svg, .button2 svg, .button-m svg {width: 36px; min-width: 36px;}
.button2:hover, .button-m:hover {color: var(--darkbase); background-color: var(--light); border: 2px solid var(--darkbase);}
.button-m.active {color: var(--darkbase); background-color: var(--light); border: 2px solid var(--darkbase);}


/*************** BANNER ********************/
.parallax{ background-position: center var(--parallax-offset, 0px) !important;  background-repeat: no-repeat; background-size: cover; overflow-x: hidden;}
.banner {height:auto; padding: 27px 10px 30px 10px; text-align: center; display: flex; flex-direction: column; gap:5px; align-items: center;}
.banner-grid {display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; width: 100%; }
.box { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; max-width: 1200px; }
.image-area {min-height: 250px; pointer-events: none;}
.title-area, .rib-area, .image-area, .subtitle-area {text-align: center;}
.subtitle-area h2, .pagetitle h2 {font-size: 1.1rem; filter:drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}
.subtitle-area {padding:0 10px;}
.image-area {min-height: 250px; width: 100%;}
.info-area {padding:0 20px;}
.banner-grid > .info-area.filterbox { display: flex !important;
    flex-direction: column !important; justify-content: center !important; 
    align-self: center !important; height: auto !important; min-height: unset !important;}
.pagetitle {padding:30px 0px 15px 0px;  position: relative; }


/*************** DEADLINE COUNTER ********************/
.countdown {flex-direction: column; align-items: center;}
.countdown .deadline {margin-bottom: 20px;}
.deadline {border: 2px solid var(--light); background-color: var(--darkbase); max-width: max-content; border-radius: 12px; position: relative;
 filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5)); }
.countdown .dead-top {padding: 0px 8px 3px 8px;}
.dead-top  {background-color: var(--light); color: var(--darkbase); text-align: center; font-weight: 700; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.dead-mid {color: var(--light); text-align: center;  text-transform: uppercase; display: flex;line-height: normal; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.countdown .dead-mid {flex-direction: row;}
.countdown .dead-mid .counter {padding: 8px 8px 8px 8px;}
.rightcounter {border-left: 1px solid var(--light);}
.dead-mid .counter {display: flex; flex-direction: column; text-align: center; width: min-content;}
.dead-mid span {font-size: 3rem; font-weight: 700; letter-spacing: normal; text-align: center;}
.goose {position:absolute; left:-72px; bottom:-25px; will-change: transform;}
.goose img {height: 240px; filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}
.countdown {display: none;}

/*************** COUNTER FLASHES ********************/
.deadline.flash {border: 2px solid var(--nextseason-light); background-color: var(--nextseason-mid); }
.flash .dead-top  {background-color: var(--nextseason-light); color: var(--nextseason-dark);}
.flash .dead-mid {color: var(--nextseason-light);}
.deadline-panel.flash, .deadline-panel:hover {background-color: var(--nextseason-light); color: var(--nextseason-dark);}
.deadline-panel.flash .date, .deadline-panel:hover .date { background-color: var(--nextseason-mid); color: var(--nextseason-light);}
.deadline-panel.flash .darkbutton:hover svg path  {fill: var(--nextseason-light);}
.deadline-panel .darkbutton:hover {color: var(--nextseason-light); background-color: var(--nextseason-dark) !important; border: 2px solid var(--nextseason-mid);}
.deadline-panel.flash .darkbutton,
.deadline-panel:hover .darkbutton {background-color: var(--nextseason-mid); color: var(--nextseason-light); border: 2px solid var(--nextseason-dark);}
.deadline-panel.flash .darkbutton svg path {fill: var(--nextseason-light);}

/********************* CHEVRON SLIDER ************************/
.chevron-group { cursor: pointer; transition: 0.2s; }
.chevron-group.left { color: var(--light); }
.chevron-group.right { color: var(--light); }
.whitespace .chevron-group.left { color: var(--darkbase); }
.whitespace .chevron-group.right { color: var(--darkbase); }
.chevron-group.inactive {color: var(--inactive-color) !important;pointer-events: none;opacity: 0.4;}
.center-dot {  width: 17px;  height: 17px;  background-color: var(--light);  border-radius: 50%;}
.chevron-group { width: 80px; height: auto;}
.left { color: var(--light);}
.right {color: var(--inactive-color);}

/*************** COLUMNS ********************/
.twocol {display: grid; grid-template-columns: 1fr; gap:20px; padding:40px 20px; text-align: left;position: relative;}
.twocolumns {column-count: 1; column-gap: 40px; column-fill: balance; padding:0px 20px 0 20px;}
article .twocolumns {column-rule: 1px solid #ccc;}
.twocolumns img {margin-bottom: 15px;}
.twocolumns p, .twocolumns li, .twocolumns .dark-box, .twocolumns .listing, .twocolumns .aside,  .twocolumns ul{orphans: 3; widows: 3; break-inside: avoid;
    -webkit-column-break-inside: avoid;}
.twocolumns h2, .twocolumns h3 {break-after: avoid;}
.tripcol {display: grid; grid-template-columns: 1fr; width: 100%;}
.tripcol:has(.dark-box), .tripcol:has(.light-box) { gap:30px;}
.unevencols, .formcols {display: grid; gap:15px; grid-template-columns: 1fr; }
.twocolumns .dark-box {margin:0 0 40px 0;}
/*section.twocolumns {flex-direction: row !important;}*/

/*************** ADVERTISEMENT ********************/
.fullad {padding:20px 20px 140px 20px; width: 100%;}
.adv-panel {position:relative; width: 100%; text-align: center; display: block; }
.adv-panel.ganderad {border: 2px solid #000; border-radius: 10px; padding:20px 10px 35px 10px; background-color: var(--light); }
.adlabel {position:absolute; bottom:0; left:0; font-size: 0.5rem; text-transform: uppercase; background-color: #fff; color:#000; padding:2px 10px; border-bottom-left-radius: 8px; border-top:1px solid #000; border-right:1px solid #000;}
.adv-panel .head {font-size: 1.4rem; color:#000; font-weight: 700;}
.adv-panel .mid {font-size: 1.2rem;color:#000;  font-weight: 700;}
.adv-panel .foot {font-size: 0.9rem;color:#000;}
.adv-panel .titles {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.adv-panel.customer .logoset{position:absolute; display: flex; width: 100%; max-width: 1000px; justify-content: space-between; align-items: center;  left: 0;
  right: 0; margin-inline: auto; padding: 0 20px; }
.adv-panel.customer .logoset .left, .adv-panel.customer .logoset .middle,.adv-panel.customer .logoset .right {
display: flex; align-items: center; justify-content: center;}
.adv-panel.customer .logoset .left, .adv-panel.customer .logoset .right {width:10%;}
 .adv-panel.customer .logoset .left img, .adv-panel.customer .logoset .right img { max-width: 70px;}
 .adv-panel.customer .services ul {list-style-type: disc;padding: 0;margin: 0 0 0 0;text-align: center;}
.adv-panel.customer .services li {display: inline-block; white-space: nowrap;
    margin: 0 5px 0 0 ;   list-style-position: inside; font-weight: 700; }
.adv-panel.customer .services li:last-child {margin-right: 0 0 0 0 ;}
.adv-panel.customer .services li::before {content: "•";}
.adv-panel.customer .foot{border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; font-size: 1rem; padding:3px 10px;}
.adv-panel.customer .adgoose {display:none;}
.adv-panel.ganderad .adgoose {display:none;}
.adgoose {position:absolute; right:0; bottom:-5px;}
.adgoose img {height:170px; transition: transform 0.3s ease; transform-origin: bottom; }
.adv-panel.ganderad:hover .adgoose img {transform: scale(1.2);}
.adv-panel.customer .content{padding:25px 10px 10px 10px;}
.adv-panel.customer .logoset .middle {border-radius: 10px; padding:5px; margin: 0 auto;
transition: all 0.6s ease; }
.adv-panel.customer .logoset {width: 100%;}
.adv-panel.customer:hover .logoset .middle {transform: scale(1.2);transform-origin: bottom;}
.adv-panel.customer:hover {box-shadow: 0 4px 16px rgba(231, 243, 213, 0.5);}
.brand-colour {border-top-right-radius: 5px; border-top-left-radius: 5px;}

/*************** FOOTER ********************/
footer {border-top: 1px solid var(--light); color: var(--light); display: flex; flex-direction:column; justify-content:center; padding:0 10px 60px 10px;
box-shadow: inset 0px 8px 25px -15px var(--light); gap: 20px;}
.foot-left {display: flex; flex-direction: column; text-align: center; justify-content: center; gap: 15px;}
footer .links {display: flex; flex-direction: row; gap:10px; justify-content: center;}
.duck, .cookies {display:none;}
.turn1{transform: rotate(70deg);}
footer .text{line-height: normal; padding-top:5px;}
.goxit {display: flex; gap:10px; align-items: center; justify-content: center;}
.goxit p {margin: 10px 0 0 0 ;}
.goxit a {position: relative; display: inline-block;}
.gox-img {width:120px; height: auto;}
svg.gox-img path {fill: var(--light); transition: all 0.6s ease;}
.spark3 {display: block; position: absolute; top:2px; right:32px;
width: 30px; height: auto;  animation: sparkle-pulse 11s infinite ease-in-out;}
@keyframes sparkle-pulse {
0%, 80% {transform:scale(1) rotate(0deg);opacity: 1;}
90% {transform:scale(1.5) rotate(-10deg);opacity: 1;}
100% {transform:scale(1) rotate(0deg);opacity: 1;}}

/*************** Section titles ********************/
.divider{ border-bottom: 1px solid var(--light); border-top: 1px solid var(--light); min-height: 28px; }
.divider .contain {padding:0px 20px 0px 20px;  display: flex; gap:10px; text-transform: uppercase;
  justify-content: space-between;font-weight: 600; font-size: 0.8rem;}
.divider .contain p {line-height: 28px; margin-bottom: 0;}

/********************* DARK FULL RIBBON ******************/
.ribbon {padding:20px 0; background-color: var(--darkbase); }
.parallax:has(.ribbon) .ribbon{margin-bottom: 40px;}
.parallax:has(.home.ribbon) .home.ribbon {margin-bottom: 0px;}
.ribbon .inner{border-top:1px solid var(--light); border-bottom:1px solid var(--light); padding: 20px 10px; }
.ribbon .inner .contain {text-align: center; padding: 50px 10px; display: flex; flex-direction: column; gap:25px; align-items: center;}
.ribbon.skinny .inner .contain{padding: 0px 10px;gap:15px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ribbon.skinny .inner { position: relative; width: 100%; height: 100px;max-height: 100px;display: flex; flex-direction: column; justify-content: center; align-items: center;}

/*************** PANELS ********************/
.dark-box p, .light-box p, .dark-box h3, .light-box h3 {margin-bottom: 10px;}
.dark-box, .light-box, .deadline-panel {border-radius: 12px;border: 1px solid var(--light);filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5)); transition: all 0.6s ease; overflow: hidden;}
.dark-box, .light-box {width: 100%;}
.dark-box, .light-box, .dark-box .content, .light-box .content {display: flex;
    flex-direction: column;
    height: 100%;}
.light-box .content, .dark-box .content {flex-grow: 1;}
.dark-box .bottom, .light-box .bottom {margin-top: auto;}
.dark-box .content, .light-box .content {padding:10px;}
.dark-box .content .heading, .light-box .heading {font-size: 1.1rem; margin-bottom: 15px; font-weight: 700;}
.dark-box .head-top,.dark-box .head-top-mid , .light-box .head-top  {text-align: center; padding:5px 20px; border-top-left-radius: 12px;border-top-right-radius: 12px;}
.dark-box .head-top, .light-box .head-top, .js-gallery-title,.dark-box .head-top h3, .light-box .head-top h3{font-size: 1.2rem;}
.dark-box .head-top p, .light-box .head-top p { font-size: 1rem;}
.dark-box {background-color: var(--darkbase); color: var(--light);}
.dark-box .head-top {background-color: var(--light); color: var(--darkbase); }
.dark-box .head-top-mid {background-color: var(--mid); color: var(--darkbase); }
a.dark-box:hover .head-top-mid, a.dark-box:hover .panel-desc {background-color: var(--light);}
a.dark-box:hover .panel-desc {color: var(--darkbase);}
a.dark-box:hover {transform: scale(1.1);}
.light-box, .deadline-panel {background-color: var(--light); color: var(--darkbase);}
.light-box .head-top {color: var(--light); background-color: var(--darkbase);}
.light-box p {margin-bottom: 10px; font-weight: 600;}
.head-top h3 {margin-bottom: 0px;}

.deadline-panel { display: flex; flex-direction: column; align-items: center; padding-bottom: 10px;text-align: center;}
.deadline-panel .head-top {padding: 5px 20px; font-weight: 700; width: max-content;}
.deadline-panel .date {width: 100%; background-color: var(--darkbase); color: var(--light); padding: 8px 3px; font-size: 1.4rem; text-align: center;}
.dark-box .date {width: 100%; background-color: var(--light); color: var(--darkbase); padding: 8px 3px; font-size: 1.4rem; text-align: center;}
.deadline-panel .content {padding:12px; font-size: 1rem;}

/*************** RESOURCE PANELS ********************/
.panel-img {height: 180px;}
.panel-img img { object-fit: cover; width: 100%; height: 100%;object-position: top;}
.panel-desc {background-color: var(--darkbase); color: var(--light); text-align: center; padding:10px 10px 10px 10px;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-top: 1px solid var(--light);line-height: normal;}
.dark-box.disabled .panel-desc, .dark-box.disabled .head-top-mid{background-color: var(--disabled1) !important; color: var(--disabled2);}
a.dark-box.disabled:hover .head-top-mid, a.dark-box.disabled:hover .panel-desc {background-color: var(--disabled1) !important; color: var(--disabled2);}
a.dark-box:hover .panel-desc {color: var(--darkbase);}
a.dark-box.disabled:hover {transform: scale(1); cursor: not-allowed;}

/*************** SECTIONS ********************/
.white {background-color: #fff; color: #000;}
.whitespace {padding:0px 0 20px 0;}
.whitespace {background-color: white; color:black;}
.whitespace {display: flex; flex-direction: column;}
.white p, .white h3, .white ul {margin-bottom: 15px;}
.inline, .whitespace {justify-content: center; align-items: center; display: flex;}

/********************* ARTICLE FEATURES ******************/
.callout, blockquote { background: #f9f9f9; border-left: 5px solid var(--mid); padding:20px 20px 10px 20px; margin: 0px 0 10px 0; font-style: italic; }
.highlight-box, aside { background: var(--mid50); padding: 25px; border-radius: 8px; margin: 20px 0; color: #000;}
.highlight-box:has(ul) ul {margin-bottom: 0;}
.warnbox {padding:20px; background-color: #eee2e2; border-radius: 8px;}
.filterbox a{break-inside: avoid; min-width: max-content; display: inline-block;}
.filterbox {background-color: var(--dark70); border-radius: 12px; padding:20px 20px; margin:10px 0;filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.5));
max-height: max-content;}
article .highlight-box h3 {margin: 0px 0 10px 0 ;}
article aside h3 {margin: 0 0 10px 0;}
.category-tag {background:var(--mid);color: var(--darkbase);padding: 4px 8px;font-size: 0.8rem;text-transform: uppercase;border-radius: 3px; display: inline-block; font-weight: bold;}
.stat-box {display: inline-block; background: var(--darkbase); color: var(--light); padding: 8px 18px 8px 18px; 
    border-radius: 3px; font-weight: bold;display: block; margin-bottom: 10px;}
h3:has(.stat-box) { line-height: normal; margin-bottom: 0px;}

/*************** ARTICLES ********************/
.art-intro {font-weight: bold; font-size: 1rem; } /* to put in ALL articles 1st para*/
article header {height: auto; position: relative;}
article p {margin-bottom: 15px;}
article h2 {margin-bottom: 10px;}
section {padding-bottom: 20px;}
article.divided section  {border-bottom: 1px solid var(--darkbase); padding:40px 0; display: flex; flex-direction: column; gap:10px;}
article footer.controls {margin-top: 0; border-top: none; color: var(--darkbase) !important; box-shadow: none; padding: 20px 20px 20px 20px;
display: flex; justify-content: center; flex-direction: row; width: 100%; align-items: center; border-bottom: 1px dotted var(--darkbase);}















/********************* PAGE SPECIFIC ************************/

/********************* parallax DO NOT MOVE ************************/
.goxhistory, .grantscheme, .churchlight, .ghistory, .currissue, .office, .homeoffice, .photography, .borneo, .community
{background-position: top center; position: relative;}

.goxhistory {background-image: url(../images/goxhill-history/church-graphic2.avif);}
.grantscheme {background-image: url(../images/backgrounds/basketsb.avif);}
.churchlight {background-image: url(../images/articles/churchlights.avif);}
.ghistory {background-image: url(../images/backgrounds/3c.avif);}
.currissue {background-image: url(../images/backgrounds/2c.avif);}
.office {background-image: url(../images/backgrounds/officebg2.avif);}
.homeoffice {background-image: url(../images/backgrounds/homeofficebg2.avif);}
.photography {background-image: url(../images/backgrounds/allsaintschurch.avif);}
.borneo {background-image: url(../images/articles/borneo/borneo1.avif);}
.community{background-image: url(../images/backgrounds/scape2.avif);}

.office .fullimg, .homeoffice .fullimg, .photography .fullimg  {height: 260px;}
.homeoffice .fullimg img {max-height:300px;}
.community .communityimg {height: 230px;}
img.papers {width:300px; }
.issue_cover {max-width: 600px;}
.image-area:has(.adspec) {min-height:260px;}
.banner-grid:has(.adspec) .maxed {min-width: 333px;}
.box:has(.adspec) {height:100%;}
.medic, .office .fullimg img, .homeoffice .fullimg img, .photography .fullimg img {bottom:-40px; left: 50%; transform: translate(-50%);position: absolute;}
.community .communityimg img {max-height:300px;bottom:-28px; left: 50%; transform: translate(-50%);position: absolute;}
.cheque {position: absolute; bottom: -40px; pointer-events: none; width: 100%;}
.gavel {width: 280px; position: absolute; right:70px; bottom:-143px;}
.adspec img {width:350px;filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.8)); }
.historian {position: absolute; height: calc(100% ); pointer-events: none; width: 100%;}
.cheque img {height:300px;filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.8));}
.const {position: absolute; height: calc(100% ); pointer-events: none; width: 100%;}
.adspec {position: absolute; height: calc(100% ); pointer-events: none; width: 100%; transform-origin: center;transform: translate(0, 0) rotate(-5deg) scale(1);}
.historian img {height:300px;filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.8));transform-origin: center;transform: translate(0, 0) rotate(-2deg) scale(1);}
.const img {width:350px; height:auto; filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.8));transform-origin: center;transform: translate(0, 0) rotate(-2deg) scale(1);}

/********************* FLippy Things ******************/
.flip-icon { position: absolute; bottom: 5px; right: 5px; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px;}
.white .flip-icon {background: var(--darkbase);}
.white .flip-icon svg path {fill:var(--light);}
.flip-icon {background: var(--light);  color: var(--darkbase);  padding:5px 4px 5px 5px;}
.flip-icon svg path {fill:var(--darkbase);}
.flip-card { background-color: transparent;width: 180px;height: 180px;
    perspective: 1000px; margin: 0 auto 15px; position: relative; cursor: pointer;}
.flip-card-inner {position: relative; width: 100%;height: 100%;transition: transform 0.6s; transform-style: preserve-3d;}
.flip-card.flipped .flip-card-inner {transform: rotateY(180deg);}
.flip-card:active {transform: scale(0.95); transition: transform 0.1s;}

/********************* Submit articles & photography ******************/
.guide-card {display: flex; align-items: center;
    text-decoration: none !important; background-color: var(--light); margin-bottom: 12px; border-radius: 10px;
    overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;  border: none;}
.guide-icon-box {background-color: var(--mid);min-width: 65px; min-height: 65px; height: 100%; display: flex;
    align-items: center;justify-content: center;}
.guide-icon-box svg {width: 26px; height: 26px; fill:var(--darkbase);}
.guide-content {padding: 10px 20px;}
.guide-content span, .guide-content small {   display: block;
    color: #000 !important; text-decoration: none !important;}
.guide-card:hover {transform: translateY(-2px);   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }

/********************* PROFILE CARDS ******************/
.profile-container {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;padding: 20px 0;}
.roundprofile {flex: 1 1 calc(25% - 20px); min-width: 200px;max-width: 280px;text-align: center;}
.profilepic img {pointer-events: none;}
.profilepic {position: absolute;width: 100%; height: 100%; -webkit-backface-visibility: hidden;
    backface-visibility: hidden; border-radius: 50%; overflow: hidden;}
.profilepic img {width: 100%; height: 100%; object-fit: cover;}
.back {transform: rotateY(180deg);}
.profilename { font-weight: bold;font-size: 1.2rem; margin-bottom: 5px;}
.roundprofile p span{display: block; font-style: italic; }
.white .profilepic {border: 4px solid var(--darkbase); }
.profilepic {border: 4px solid var(--light); }

/********************* KIDS ZONE ******************/
/********************* SPEECH BUBBLE ******************/
.goose-bubble {position: absolute; opacity: 0; display: none;pointer-events: none;
    bottom: 90%;right: 20;margin-bottom: 20px; background: #ffffff;  border: 2px solid var(--mid);
    border-radius: 15px;padding: 10px 15px; max-width: 250px;font-style: italic;
    color: var(--darkbase); box-shadow: 4px 4px 0px rgba(143, 161, 109, 0.2);}
.goose-bubble.safety-message {bottom:200px;left: 50%; transform: translateX(-50%);}
.goose-bubble.ontimeline {position: relative; opacity: 1; display: flex;bottom: auto;
    left: auto;margin: 10px auto;}
.goose-bubble::after {content: ''; position: absolute;bottom: -10px;
    left: 20px;border-width: 10px 10px 0 0;border-style: solid;
    border-color: var(--mid) transparent transparent transparent;}
.palette-sticker:hover ~ .goose-bubble {display: flex;opacity: 1;transform: translateY(0);}

/********************* COLOURING IN ******************/
.palette-sticker {position: absolute;bottom: -15px; right: 10px;width: 55px;height: 55px;
    background-color: var(--mid); border: 3px solid #FFF; border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);display: flex;
    align-items: center;justify-content: center;padding: 8px; animation: palette-float 3s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);pointer-events: auto;}
.palette-sticker:active {transform: scale(0.9);}
.palette-sticker.safety-sticker {left: 50%; transform: translateX(-50%);}
.safety-sticker {background-color: #d32f2f;right: 75px;animation-delay: 1.5s;}
.safety-sticker:hover ~ .safety-message {display: flex;opacity: 1;}
@keyframes palette-float {0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-5px, -8px) rotate(5deg); }}

/********************* ARCHIVE HOTLINKS ******************/
.skipto {display: flex; justify-content: center; align-items: center; padding:0 10px 30px 10px; margin: auto auto; flex-direction: column;min-height: 50vh;}
.skipto.maxcontent {min-height: auto !important;}

/********************* SEARCH ARCHIVE AND VERIFY MAP ******************/
.search-body, .search-collapse {max-height: 1000px; opacity: 1; overflow: hidden; transition: all 0.4s ease-in-out;}
.search-tab.is-collapsed .search-body,.search-tab.is-collapsed .search-collapse {
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin: 0;pointer-events: none; }
.search-tab.is-collapsed {height: auto;}
.search-tab{width:90%; max-width: 600px; margin:0 auto; border: 1px solid var(--light); border-top: none; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; padding:5px;}
.verify.search-tab {width: 100%;}
.search-top {text-align: center; border-top-left-radius: 8px;  border-top-right-radius: 8px;}
.search-tab .search-top{ background-image: url(../images/icons/Down.svg); background-position: right 20px center; background-repeat: no-repeat;}
.search-tab.active .search-top{ background-image: none;}
.search-tab form {display: grid; gap:10px;}
.search-collapse{padding: 3px 0; }
.search-collapse, .search-top:hover {text-align: center; border-top: 1px solid var(--light); background-color: var(--mid70); color: var(--darkbase); border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;font-weight: 700; cursor: pointer;}
.search-collapse, .search-top {border-top: 1px solid transparent}
.search-collapse{background-image: url(../images/icons/Up.svg); background-position: right 20px center; background-repeat: no-repeat;}

.search-top:hover svg path {fill:var(--darkbase);}
.search-collapse:hover {background-color: var(--light);}
.search-title {text-align: center;  border-bottom: 1px solid var(--light); margin-bottom: 10px;}
.search-body, .search-title {padding:5px 20px; display: grid; text-align: center;}
.search-results {text-align: center;}
.search-tab .twoevencol {display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap:10px;}
.search-tab .twoevencol button {width:100%; max-width: 100%;}
section.verify {padding-bottom:20px; border-bottom:1px solid var(--light);}

/************************** ADVERTISE AND CONSTITUTION show/hide  *********************************/
#detail, #detail2 {max-height: 0; overflow: hidden; opacity: 0;transition: max-height 0.8s ease-in-out, opacity 0.4s ease;
    margin: 0 !important;padding-top: 0 !important;padding-bottom: 0 !important;border: none !important;}
#detail.open, #detail2.open {max-height: 15000px; opacity: 1;
    margin-top: 20px !important; margin-bottom: 20px !important;padding-top: 40px !important;padding-bottom: 80px !important;}
#detail > *, #detail2 > * {display: block; width: 100%;}
#show-detail, #show-detail2, #hide-detail, #hide-detail2  {cursor: pointer;}

/************************* TABLE BASE (Mobile First) ****************************/
.comparison-grid { display: grid; grid-template-columns: 1fr; gap: 10px; border-radius: 8px; overflow: hidden; width: 100%; max-width: 100%; margin-bottom: 20px; }
.grid-header { display: none; }
.val-title { display: block; font-weight: 600; }
.feature-row { display: flex; flex-wrap: wrap; padding: 0; border: 1px solid var(--light); border-radius: 8px; background: var(--darkbase); color: #fff; overflow: hidden; }
.comparison-grid.darkbg .feature-row { background: var(--light) !important; color: var(--darkbase); }
.feature-label { width: 100%; font-weight: bold; color: var(--light); text-transform: uppercase; display: block; padding: 12px; text-align: center; border-bottom: 1px solid var(--light); }
.comparison-grid.darkbg .feature-label { color: var(--darkbase); border-bottom: 1px solid var(--darkbase); }
.grid-5-col .val-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border-right: 1px solid rgba(255,255,255,0.1); }
.comparison-grid.darkbg.grid-5-col .val-box { border-right: 1px solid rgba(0,0,0,0.1); }
.grid-5-col .val-box.last { border-right: none; }
.val-box { display: flex; gap: 10px; padding: 15px; }

@media screen and (min-width: 1000px) {
  .comparison-grid { grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--darkbase); width: 100%; }
  .comparison-grid.darkbg { border: 1px solid var(--light); }
  .grid-header { display: contents; }
  .header-cell { background: var(--darkbase); padding: 20px; font-weight: bold; text-align: center; color: var(--light); border-bottom: 2px solid var(--light); }
  .comparison-grid.darkbg .header-cell { background: var(--light); color: var(--darkbase); border-bottom: 2px solid var(--darkbase); }
  .feature-row { display: contents; color: var(--darkbase); }
  .comparison-grid.darkbg .feature-row { color: var(--light); }
  .feature-label { width: auto; background: var(--darkbase); display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--light); text-transform: none; font-size: 1rem; color: var(--light); margin-bottom: 0; }
  .comparison-grid.darkbg .feature-label { background: var(--light); border-bottom: 1px solid var(--darkbase); color: var(--darkbase); }
  .feature-label.last, .val-box.last, .comparison-grid.darkbg .feature-label.last, .comparison-grid.darkbg .val-box.last { border-bottom: none; }
  .val-box { width: auto; background: var(--slate-light); padding: 15px 20px; border-bottom: 1px solid var(--darkbase); margin-bottom: 0; display: flex; align-items: center; border-right: none;
  line-height: normal;}
  .comparison-grid.darkbg .val-box { border-bottom: 1px solid var(--light); }
  .val-title { display: none; }
  .web-col { background: rgba(197, 160, 89, 0.05); border-left: 1px solid var(--dark70); }
  .comparison-grid.darkbg .web-col { border-left: 1px solid var(--light); }
  .grid-2-col { grid-template-columns: 1fr 1.5fr !important; }
  .grid-5-col {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)) !important;
    width: 100%;}
}



















/*************** MEDIA QUERIES *************/

@media (min-width: 2100px)
{
header .wide{ padding:10px 300px 0 300px !important;}
footer {padding: 0 300px 60px 300px !important;}
article footer { padding: 20px 40px 20px 40px !important;}
}
@media (min-width: 1700px)
{
footer {padding: 0 150px 60px 150px;}
footer { flex-direction: row; justify-content:space-between;}
.foot-left {flex-direction: row; text-align: left; }
}
@media (min-width: 1400px)
{
header .wide{ padding:10px 150px 0 150px;}
.ribbon .inner{ background-position: left 20% bottom 0 !important; }
main{background-position: left 20% bottom 0 !important; }
}
@media (min-width: 1200px)
{
.office {background-image: url(../images/backgrounds/officebg.avif);}
.homeoffice {background-image: url(../images/backgrounds/homeofficebg.avif);}
.photography {background-image: url(../images/backgrounds/allsaintschurch.avif);}
.ghistory {background-image: url(../images/backgrounds/3.avif) !important;}
.currissue {background-image: url(../images/backgrounds/2.avif) !important;}
header .estop {width:100px; height:16px;}
.estop, header .right {display: flex !important;}
.estop2 {display:block; text-align: center;}
.centered {padding:0 15px 0px 15px;}
.tripcol:has(.dark-box), .tripcol:has(.light-box) { gap:50px !important;}
}
@media (min-width: 1000px)
{
.tabtop svg path, .tabbot svg path, svg.logo {fill: var(--light); transition: all 0.6s ease;}
header .tabtop {background: linear-gradient(to right, #324043 0%, #324043 57%, #232D2F 95%, #232D2F 100%);}
header .left, header .right {width: 100%;}
header .centered { justify-content: center; width: 100%;}
.mainnav {display: flex;}
.burgernav, header .right{display: none;}
.burger-menu{display: none !important ;}
.formcols {display: grid; gap:50px; grid-template-columns: 1fr 360px; } 
}
@media (min-width: 900px)
{
body {font-size: 0.9em;}
.banner {padding: 70px 40px 55px 40px !important; gap:5px;}
.banner.fixed {height:270px;}
.banner p.home, p.home{font-family: CinzelBold, Times, serif; font-size: 1.5rem; }
article .banner h1, article .title-area h1, h1 {font-size: 3rem !important; letter-spacing: 0.05em ; }
.banner .mainlogo {max-width: 70%;}
.ribbon h3 {font-size: 1.65rem;}
.ribbon p {font-size: 1.1rem;}
.rightbot .tab, .righttop .tab{max-width: max-content; }
.rightbot .tab, .righttop .tab{background-color: var(--dark70); color: var(--light); font-weight: 400; display: flex;}
.rightbot .tab svg path, .righttop .tab svg path {fill: var(--light); transition: all 0.6s ease;}
.twocol {grid-template-columns: 1fr 1fr;}
.adv-panel .titles {flex-direction: row;}
.adv-panel .head {font-size: 1.7rem; color:#000; font-weight: 700;}
.adv-panel .mid {font-size: 1.7rem;color:#000;  font-weight: 700;}
.adv-panel .foot {font-size: 1rem;color:#000;}
.burger-nav .strip .goosehead {bottom:54px;}
.banner p  {max-width: 700px; font-size: 0.9rem;}
.banner-grid {
grid-template-columns: 1fr 350px minmax(0, 650px) 1fr;
grid-template-rows: auto auto auto 1fr auto auto;
grid-template-areas:
    "title    title     title     title"
    "subtitle subtitle  subtitle  subtitle"
    ".        image     info      ."
    ".        image     info      ."
    "rib      rib       rib       rib"
    ".        spacer    links     .";}
.info-area { grid-area: info; margin-top: 25px; }
.subtitle-area { grid-area: subtitle;}
.image-area { grid-area: image; width: 400px;}
.title-area { grid-area: title; }
.rib-area   { grid-area: rib; }
.links-area { grid-area: links;}
.subtitle-area h2, .pagetitle h2 {font-size: 1.6rem;}
.adspec img {width:500px;}
.historian img {height:400px;}
.historian {left: 98px !important; bottom: -6px;}
.cheque img {height:440px; width:auto;}
.cheque {left: 98px !important; bottom: -46px;}
.const img {width:410px;}
.const {left: 158px !important; bottom: -50px;}
.community .communityimg {height: 480px !important;}
.community .communityimg img {max-height: 600px !important; bottom:-45px !important;}
.office .fullimg {min-height: 400px !important;}
.office .fullimg img { max-height: 400px !important; left: 50%;}
.homeoffice .fullimg {min-height: 400px !important;}
.homeoffice .fullimg img { max-height: 400px !important; left: 50%;}
.photography .fullimg {min-height: 400px !important;}
.photography .fullimg img { max-height: 400px !important; left: 50%;}
.grantscheme {background-image: url(../images/backgrounds/baskets.avif);}
.borneo {background-image: url(../images/articles/borneo/borneo.avif);}
.community{background-image: url(../images/backgrounds/scape.avif) !important;}
.churchlight {background-image: url(../images/articles/churchlightsbigger1.avif);}
.goxhistory {background-image: url(../images/goxhill-history/church-graphic2500.avif);}
h2, article h2, article h1 {font-size: 1.8rem !important;}
.button2.maxed , .button-m.maxed, .collection.maxed { min-height: 56px !important;}
.unevencols {gap:50px !important;}
.fullad {padding:20px 30px 140px 30px !important;}   
}
@media (min-width: 750px)
{
.banner .mainlogo {max-width:677px; width:50%;}
.duck {display:flex;}
.unevencols {display: grid; gap:30px; grid-template-columns: 2fr 1fr; }
.twocol {display: grid; grid-template-columns:1fr 1fr; gap:50px; padding:30px 30px;}
.tripcol {display: grid; grid-template-columns: 1fr 1fr 1fr; gap:30px;}
.twocolumns {column-count: 2; padding:0px 30px 10px 30px;}
.wrap {padding:0 30px;}
article footer { padding: 20px 30px 0 30px;}
/*.ai-heading {padding: 0px 30px 0 30px;}
.ai-foot {padding:0 30px;}*/
.divider .contain {padding:0px 30px 0px 30px;}
.titlebar {padding:5px 30px 5px 30px; }
.art-foot{padding:15px 30px 0 30px; }
.adv-panel.ganderad .adgoose {display:block;}
.section {padding:60px 30px 100px 30px;}
.dark-box .head-top , .light-box .head-top {font-size: 1.5rem;}
.ribbon .inner .contain h3 {font-size: 1.35rem;}
.ribbon p {font-size: 1rem;}
.buttongroup .doublebutton {flex-direction: column;}
.dark-box .content, .light-box .content {padding:30px;}
#collectionWrapper {height:294px; max-height:294px;}
.collection {display: none !important;}
.collection-list {display: grid; grid-template-rows: 1fr !important;opacity: 1 !important;overflow: visible; flex-direction: column;}
.skipto {padding:90px 10px;}
.skipto.maxcontent {padding: 0px 20px 30px 20px;}
.inline .button span, .inline .darkbutton span{display: inline; }
img.papers { float:left; margin:5px 15px 5px 0;}
.section {padding:60px 30px 80px 30px;}
.twocol {padding:40px 30px 40px 30px;}
}
@media (min-width: 600px) 
{
.office .fullimg {min-height: 300px;}
.office .fullimg img {max-height: 300px; left: 50%;}
.community .communityimg {height: 360px;}
.community .communityimg img {max-height: 450px; bottom:-35px;}
}
@media (max-width: 600px) {
.roundprofile, .squareprofile { flex: 1 1 100%; }
}
@media (min-width: 480px)
{
.community{background-image: url(../images/backgrounds/scape3.avif);}
.ghistory {background-image: url(../images/backgrounds/3.avif);}
.currissue {background-image: url(../images/backgrounds/2.avif);}
.issue { max-width: max-content; align-items: center; }
.cookies {display:flex;}
.feature-head{font-size: 1.8rem;}
}
@media (min-width:359px)
{
.banner { padding: 47px 15px 30px 15px;}
li {margin:0 0 8px 0; }
}
@media (min-height: 700px)
{
.bottom .goxit {display: flex;}
}


@media (min-height: 660px)
{
.countdown {display: flex;}
}
@media (max-width: 992px) {.roundprofile, .squareprofile { flex: 1 1 calc(50% - 20px); } }