.bg-silver { background-color:#fafafa; }

.color-white { color:white; }
.color-black { color:black; }
.color-sky { color:var(--ccbrand-sky); }
.color-sun { color:var(--ccbrand-sun); }
.color-thistle { color:var(--ccbrand-thistle); }
.color-cloud { color:var(--ccbrand-cloud); }
.color-pacific { color:var(--ccbrand-pacific); }
.color-pine { color:var(--ccbrand-pine); }
.color-brick { color:var(--ccbrand-brick); }
.color-sand { color:var(--ccbrand-sand); }

.fg-white { color:white; }
.fg-black { color:black; }
.fg-sky { color:var(--ccbrand-sky); }
.fg-sun { color:var(--ccbrand-sun); }
.fg-thistle { color:var(--ccbrand-thistle); }
.fg-cloud { color:var(--ccbrand-cloud); }
.fg-pacific { color:var(--ccbrand-pacific); }
.fg-pine { color:var(--ccbrand-pine); }
.fg-brick { color:var(--ccbrand-brick); }
.fg-sand { color:var(--ccbrand-sand); }

.bg-white { background-color:white; }
.bg-black { background-color:black; }
.bg-sky { background-color:var(--ccbrand-sky); }
.bg-sun { background-color:var(--ccbrand-sun); }
.bg-thistle { background-color:var(--ccbrand-thistle); }
.bg-cloud { background-color:var(--ccbrand-cloud); }
.bg-pacific { background-color:var(--ccbrand-pacific); }
.bg-pine { background-color:var(--ccbrand-pine); }
.bg-brick { background-color:var(--ccbrand-brick); }
.bg-sand { background-color:var(--ccbrand-sand); }


/* buttons */

.btn-brand { background-color:var(--cty-alink); border:1px solid var(--cty-alink); color:white; text-transform:uppercase;
  margin:4px 2px 4px 0px; padding: .375rem .75rem; transition: all 0.15s linear 0s; text-decoration:none; }
.btn-brand:hover { background-color:var(--cty-ahover); border-color:var(--cty-ahover); color:white; text-decoration:none; }

.btn-brand { border-radius:0; font-size:0.9rem; font-weight:700; letter-spacing:0rem; margin-top:14px; }

.bg-sand .btn-brand { color:var(--ccbrand-sand); background-color:var(--ccbrand-pine); border-color:var(--ccbrand-pine); }
.bg-brick .btn-brand { color:var(--ccbrand-brick); background-color:var(--ccbrand-thistle); border-color:var(--ccbrand-thistle); }
.bg-pacific .btn-brand { color:var(--ccbrand-pacific); background-color:var(--ccbrand-sky); border-color:var(--ccbrand-sky); }
.bg-cloud .btn-brand { color:var(--ccbrand-cloud); background-color:var(--ccbrand-pine); border-color:var(--ccbrand-pine); }
.bg-sun .btn-brand { color:var(--ccbrand-sun); background-color:var(--ccbrand-brick); border-color:var(--ccbrand-brick); }
.bg-pine .btn-brand { color:var(--ccbrand-pine); background-color:var(--ccbrand-sand); border-color:var(--ccbrand-sand); }

.webform .btn-brand { color:var(--ccbrand-cloud); background-color:var(--ccbrand-pacific); border-color:var(--ccbrand-pacific); }

.btn-outline-brand { background-color:white; border:1px solid var(--cty-alink); color:var(--cty-alink); font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:0.100rem; 
 margin:4px 2px 4px 0px; padding: .375rem .75rem; transition: all 0.15s linear 0s; }
.btn-outline-brand:hover { background-color:var(--cty-ahover); border-color:var(--cty-ahover); color:white; }

.btn-brand-pill { background-color:var(--cty-alink); border:1px solid var(--cty-alink);  color:white; font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:0.100rem; border-radius:20px; 
  margin:4px 2px 4px 0px; padding: .275rem 1rem; transition: all 0.15s linear 0s; }
.btn-brand-pill:hover {  background-color:var(--cty-ahover); border-color:var(--cty-ahover); color:white; }

.btn-outline-brand-pill { background-color:white; border:1px solid var(--cty-alink); color:var(--cty-alink); font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:0.100rem; border-radius:20px; 
  margin:4px 2px 4px 0px; padding: .275rem 1rem; transition: all 0.15s linear 0s; }
.btn-outline-brand-pill:hover { background-color:var(--cty-ahover); border-color:var(--cty-ahover); color:white; }

.btn-naked { color:var(--cty-alink); text-transform:uppercase; letter-spacing:0.050rem; margin:4px 2px 4px 0px; padding: .375rem 0rem; transition: all 0.15s linear 0s; }
.btn-naked:hover { color:var(--cty-ahover); }


/* social buttons */

.splash-social { text-align:left; margin:1.5rem 0; }
.splash-social a { display:inline-block; width:40px; height:40px; font-size:18px; line-height:40px; border-radius:50%; text-align:center; margin:0 8px; }
.splash-social a { text-decoration:none; color:var(--ccbrand-sand); background-color:var(--ccbrand-pine); border:none; transition: all 0.15s linear 0s; }
.splash-social a:hover { color:var(--ccbrand-sand); background-color:var(--ccbrand-pine); }


/* open layout */

.corner-logos-thistle {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-thistle.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-thistle.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}

.corner-logos-sky {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-sky.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-sky.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}

.corner-logos-pacific {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-pacific.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-pacific.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}

.corner-logos-brick {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-brick.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-brick.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}

.corner-logos-cloud {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-cloud.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-cloud.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}

.corner-logos-sun {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-sun.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-sun.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}

.corner-logos-pine {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-pine.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-pine.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}

.corner-logos-sand {
  background-image:url('https://ctycms.com/ca-social-district/corner-top-sand.svg'),url('https://ctycms.com/ca-social-district/corner-bottom-sand.svg');
  background-size: 262px auto, 262px auto;
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  padding-top:75px;
  padding-bottom:187px;
}



/* legacy code */

.corner-logo-top { position:absolute; top:0px; right:0px; width:262px; height:auto; }
.corner-logo-bottom { position:absolute; bottom:0px; left:0px; width:262px; height:auto; }

.corner-logo-top a { display:block; }
.corner-logo-bottom a { display:block; } 

.bg-sun .svg-text { fill:var(--ccbrand-sun); }
.color-brick .svg-bg { fill:var(--ccbrand-brick); }

.bg-cloud .svg-text { fill:var(--ccbrand-cloud); }
.color-pine .svg-bg { fill:var(--ccbrand-pine); }

.bg-brick .svg-text { fill:var(--ccbrand-brick); }
.color-thistle .svg-bg { fill:var(--ccbrand-thistle); }

.bg-pine .svg-text { fill:var(--ccbrand-pine); }
.color-sun .svg-bg { fill:var(--ccbrand-sun); }

.bg-sand .svg-text { fill:var(--ccbrand-sand); }
.color-pine .svg-bg { fill:var(--ccbrand-pine); }

.bg-pacific .svg-text { fill:var(--ccbrand-pacific); }
.color-sky .svg-bg { fill:var(--ccbrand-sky); }

.splash-fixed .svg-text { fill:var(--ccbrand-cloud); }
.splash-fixed .svg-bg { fill:var(--ccbrand-pine); }

.flodesk-subscribe { border:1px solid var(--ccbrand-thistle); margin-top:1.5rem; margin-bottom:1rem;  }