/* global vars */

:root {
  --ctybrandblack: #4B4A49; /* silver spring */
  --ctybrandblue: #1AAED8; /* silver spring 163f7d */
  --ctybrandbluedark: #117E9D;
  --ctybrandred: #d31244; /* silver spring */
  --ctybrandpurple: #7c3281; /* silver spring */
  --ctybrandgreen: #c4d703; /* silver spring */
  --ctybluelight: #c1f6fc; /* light blue */
  
  --ctybrandpale: #fcf9f7; 
  
  --cty-offscreen-bg: #eee; /* off page background color */
  --cty-default-bg: white; /* general background color */
  --cty-default-txt: #4B4A49; /* general text color */
  --cty-default-txt-darker: #2b2A29; /* general text color */
  


  --bs-heading-color: #4B4A49; /* bootstrap heading color */
       
  --cc-alink: #117E9D; /* primary link color */
  --cc-ahover: #1AAED8; /* primary hover color */
  --cc-asec-link: #222; /* secondary link color */
  --cc-asec-hover: #4B4A49; /* secondary hover color */
  --cc-asec-divider: #aaa; /* secondary divider color */
  
  --cc-alert-bg: #d31244; /* alert background color */
  --cc-alert-txt: white; /* alert text color */
 
  --cc-pnav-link: #117E9D; /* var(--cc-pnav-link) nav color */
  --cc-pnav-hover: #1AAED8; /* var(--cc-pnav-hover) nav hover color */ 
  --cc-pnav-dropdown: #ffffff; /* var(--cc-pnav-dropdown) dropdown background color */
    
  --cc-linework: #ddd; /* hr, sidenav, mobile nav */
  --cc-footer-wrap: #eeeeee; /* var(--cc-pnav-dropdown) dropdown background color */
  --cc-banner-wrap: #eeeeee; /* var(--cc-pnav-dropdown) dropdown background color */


  --cc-transition-hover: all 250ms ease-in;

}

.brand-purple { color:var(--ctybrandpurple); }
.brand-red { color:var(--ctybrandred); }
.brand-blue { color:var(--ctybrandblue); }
.brand-blue-ada { color:var(--cc-pnav-link); }
.brand-green { color:var(--ctybrandgreen); }



.bg-green { background-color:var(--ctybrandgreen); }
.bg-light-blue { background-color:var(--ctybluelight); }




.bg-purple-top { background: linear-gradient(180deg, var(--ctybrandpurple) 0%, var(--ctybrandpurple) 480px, white 480px, white 100%); }
@media all and (min-width: 992px) {
  .bg-purple-top { background: linear-gradient(180deg, var(--ctybrandpurple) 0%, var(--ctybrandpurple) 400px, white 400px, white 100%); }
}
@media all and (min-width: 1400px) {
  .bg-purple-top { background: linear-gradient(180deg, var(--ctybrandpurple) 0%, var(--ctybrandpurple) 520px, white 520px, white 100%); }
}
.bg-purple-top h2 { color:white; text-transform:none; margin:0; }

.bg-blue-top { background: linear-gradient(180deg, var(--ctybrandblue) 0%, var(--ctybrandblue) 480px, white 480px, white 100%); }
@media all and (min-width: 992px) {
  .bg-blue-top { background: linear-gradient(180deg, var(--ctybrandblue) 0%, var(--ctybrandblue) 400px, white 400px, white 100%); }
}
@media all and (min-width: 1400px) {
  .bg-blue-top { background: linear-gradient(180deg, var(--ctybrandblue) 0%, var(--ctybrandblue) 520px, white 520px, white 100%); }
}

.bg-blue-top h2 { color:black; text-transform:none; margin:0; }