/* --------------------------------------------------- */
/* TOP NAVIGATION */
/* --------------------------------------------------- */

#navbar * {
  /* outline: 1px solid #444; */
}



:root {
  --navheightdesktop: 5rem;
  --navheightmobile: 4rem;
}


#dev-navbar{
  top:0;
  left:0;
  position: fixed;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0rem;
  background:#222;
  height: var(--navheightdesktop);
  z-index: 99999;
}


#navbar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height: var(--navheightdesktop);
  display: flex;
  justify-content:space-between;
  align-items: center;
  gap:1rem;
  background: linear-gradient(0deg, rgba(19,19,19,1) 0%, rgba(0,0,0,1) 100%);
  z-index: 99999;
  transition: height 250ms ease-out;

}

.navbar-desktop { height: var(--navheightdesktop); }
.navbar-mobile  { height: var(--navheightmobile); }

.expand-navbar {
  height: 100vh !important;
}





#burger-container {
  display:none;
}

#burger-container span {
  /* display:none; */
}

#logo, #main-menu, .search {
  /* border:1px solid blue; */
  background-color:none;
}

/* --------------------------------------------------- */
/* LOGO */
/* --------------------------------------------------- */

#logo {
  /* margin-right:auto; */
  display:flex;
  flex: 1;
  width: max-content;
  justify-content:flex-start;
  align-items:center;
  flex-wrap: wrap;
  margin-left: 2rem;
  height: var(--navheightdesktop);

}

#logo a {
  width: max-content;
  display:inline-block;
  display: block;

}

#desktop-logo {
  height:3rem;
  display: flex;
  justify-content: center;
  padding-bottom: .5rem;
}

#logo-stapline {
  /* border:1px solid red; */
  margin:0.5em 0 0 0;
  font-size: 0.6em;
  text-align: center;
  color: var(--navstrapline);
  display: none;
}


#mobile-logo {
  display:none;
  opacity: 1;
  position: absolute;
  left: 50%;
  top:1.25rem;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  height: calc(var(--navheightdesktop) * 0.35);
  width: calc(var(--navheightdesktop) * 0.35);


}

#mobile-logo-container {
  position:relative;
  rotate: -180deg;
  transition: 250ms rotate ease-in;
}

.mobile-logo-spin {
  rotate: 0deg !important;
  transition: 250ms rotate ease-in;
}






img#desktop-logo {
  margin:0 0 0.6rem 0;
}

/* --------------------------------------------------- */
/* MENU LINKS */
/* --------------------------------------------------- */

#main-menu * {
  /* outline:1px solid lime; */
}

#main-menu {
  display: flex;
  justify-content:space-between;
  align-items: center;
  height: var(--navheightdesktop);
  width:33rem;
  width:500px;
}

#main-menu ul {
  display: flex;
  flex:1;
  justify-content:space-around;
  align-items: center;
}

#main-menu li a {
  padding: 0.4rem 0 0.4rem 0;
  font-size: calc(var(--navheightdesktop) * 0.2);
  line-height: calc(var(--navheightdesktop) * 0.5);
}

#main-menu a {
  display:inline-block;
  text-decoration: none;
  color: var(--navlinks)
}

#main-menu a:hover {
   color: var(--navhover);
}

#main-menu li a:after {
  display:block;
  content: '';
  /* padding-bottom: 1.5em; */
  /* border-bottom: dotted 3px rgba(230, 69, 75, 0.75); */
  border-bottom: dotted 3px rgba(102, 102, 102, 0.75);

  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

#main-menu li a:hover:after {
    content: '';
    color:rgba(230, 69, 75, 1);
    display:block;
    content: '';
    /* padding-bottom: 1.5em; */
    /* border-bottom: dotted 3px rgba(230, 69, 75, 0.75); */
    border-bottom: dotted 3px rgba(102, 102, 102, 0.75);
    transform: scaleX(1);

}

#main-menu li a.hidden:after {
  content: '';
  border-bottom: dotted 3px rgba(230, 69, 75, 0.75);

  transform: scaleX(1);

}



/* --------------------------------------------------- */
/* FOOTER */
/* --------------------------------------------------- */

footer * {
  /* outline:1px solid lime; */
}

footer {
  background:var(--black);
  color:var(--footer);
  padding:4em 0;
  /* background: linear-gradient(0deg, rgba(19,19,19,1) 0%, rgba(0,0,0,1) 100%); */
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(10,10,10,1) 100%);

}

#footer-logo {
  display:block;
  text-align:center;
  margin:0em auto .15em auto;
  opacity:0.75;
  font-family: "Alphadot-Quirks";
  font-size: 3em;
  line-height:0.75em;
  color:var(--footer);
}

#footer-tagline {
  font-family: Montserrat-Medium;
  font-size:0.6em;
  text-align:center;
  letter-spacing: 0.1rem;

}


#logo-strap {
  margin: 0 auto;
  display: block;
  justify-content: center;
  align-items: center;
}



/* FOOTER MENU */


#footer-menu * {
  /* outline:1px solid #333; */
}

#footer-menu-container {


}

#footer-menu {
  display: flex;
  justify-content:space-around;
  align-items: center;
  height: var(--navheightdesktop);
}

#footer-menu ul {
  /* width:33rem; */
  flex:1;
  display:flex;
  align-items: center;
  max-width: 33rem;
  justify-content:space-around;
}



#footer-menu li a {
  padding: 0.4rem 0 0.4rem 0;

}

#footer-menu a {
  display:inline-block;
  text-decoration: none;
  color: var(--navlinks);

}





#footer-menu ul li a:hover {
  color:var(--navhover) !important;
}




#footer-menu li:after {
  display:block;
  content: '';
  /* padding-bottom: 1.5em; */
  border-bottom: dotted 3px rgba(230, 69, 75, 0.75);
  border-bottom: dotted 3px rgba(102, 102, 102, 0.75);

  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

#footer-menu  li:hover:after {
    content: '';
    color:rgba(230, 69, 75, 1);
    display:block;
    content: '';
    /* padding-bottom: 1.5em; */
    border-bottom: dotted 3px rgba(230, 69, 75, 0.75);
    border-bottom: dotted 3px rgba(102, 102, 102, 0.75);
    transform: scaleX(1);

}

#footer-menu  li.hidden:after {
  content: '';
  border-bottom: dotted 3px rgba(230, 69, 75, 0.75);
  transform: scaleX(1);
}





/* FOOTER LINKS */

#footer-links * {
  /* outline:1px solid lime; */

}


#footer-links ul {
  margin:1rem 0;
  display:flex;
  justify-content: center;
}

#footer-links li  {
   margin:0 0.7em;
   font-size: 1.75em;
   display:flex;
   justify-content: center;
   align-items: center;

}

#footer-links li a {
   color: var(--navsocial);
   transition: 250ms color ease-in;
}

#footer-links li a:hover {
  color: var(--red);
}

#backtotop {
  display:flex;
  justify-content: center;
  align-items: center;
}

#backtotop a > img {
  transition: 0.3s;
  color: var(--grey2);
}

#backtotop a:hover > img {
  transition: 0.3s;
    color: var(--red);
}


.arrow-back-to-top {
  font-family: Arrows;
  font-size: 1.5em;
  cursor:pointer;
}

.arrow-back-to-top::before { content: 'A'; }


/*
.svg-grey   {filter: invert(40%) sepia(0%) saturate(102%) hue-rotate(227deg) brightness(98%) contrast(91%);}
.svg-red    {filter: invert(49%) sepia(84%) saturate(5604%) hue-rotate(334deg) brightness(93%) contrast(93%);} */





.spacer {
}

#footer-caveat-date {
  margin:1rem 0;
  color:var(--footer);
}

#footer-caveat, #footer-date {
  font-family: "Alphadot-Rigid";
  text-align:center;
  font-size:0.8em;
  opacity: 0.7;
}

#footer-copyright {
  font-family: "Alphadot-Quirks";
  font-size:1em;
}

#footer-caveat p {
  font-size:0.9em;
  color:var(--red);
  opacity:0.7;
  text-align:center;
}

#footer-caveat p a {
  color:var(--red);
}

.santaunion-footer {
  font-family: "Alphadot-Quirks";
}





/* --------------------------------------------------- */
/* OLD CSS FROM PREVIOUS SITE */
/* --------------------------------------------------- */













/* --------------------------------------------------- */