/* global vars */

:root {
  
  --cty-offscreen-bg: #c4e3e6; /* off page background color */
  --cty-default-bg: #e5f3f4; /* general background color */
  --cty-default-txt: #19226d; /* general text color */
  --bs-heading-color: #19226d; /* bootstrap heading color */

  --cty-brand-navy: #19226d; /* admo dark blue */
  --cty-brand-navy-dark: #0f1547;
  --cty-brand-pink: #e30285; /* admo magenta was #ec008c */
  --cty-brand-green: #00b293; /* admo persian green */
  --cty-brand-yellow: #f7a43f; /* admo yellow */
  --cty-brand-blue: #0699ab; /* admo bondi blue */
  --cty-brand-pale: #e5f3f4; /* admo light blue as footer */
  --cty-brand-medium: #c4e3e6; /* admo light blue as footer */

  --cty-bg-card: #fafafa; /* default lk and crd background */
       
  --cty-alink: #1976D2; /* primary link color */
  --cty-ahover: #2196F3; /* primary hover color */
  --cty-asec-link: #222; /* secondary link color */
  --cty-asec-hover: #444; /* secondary hover color */
  --cty-asec-divider: #aaa; /* secondary divider color */
  
  --cty-alert-bg: #19226d; /* alert background color */
  --cty-alert-txt: white; /* alert text color */
   
  --cty-transition-hover: all 150ms linear 0s; /* as on buttons */

}



body,html {
  height:100%;
  background-color:var(--cty-offscreen-bg);
}

#page-wrap {
  position:relative;
  width:100%;
  background-color:var(--cty-default-bg);
  color:var(--cty-default-txt);
}

#page-header { position:relative; z-index:2; }

#page-content { position:relative; z-index:1;}