body,html {
  height:100%;
  background-color:var(--cms-green); /* the offscreen bg */
}

#page-wrap {
  position:relative;
  width:100%;
  background-color: var(--cms-cream-light);
  color:var(--cms-brown);
  background-image: url('https://img.ctykit.com/cdn/co-boulder/texture-light.jpg');
}

#page-header { display:block; width:100%; position:absolute; top:0px; z-index:3;  }
#page-header { transition: all 100ms linear 0s; box-shadow:none; }
#page-header.bg-solid { background-color:var(--cms-green); transition: all 50ms linear 0s; box-shadow: rgba(0,0,0, 0.25) 0px 0px 12px; }

.nav-block {
  width:100%;
  height:90px;
  background-color:var(--cms-green);
  border-bottom:1px solid white;
}
@media all and (min-width: 992px) {
  .nav-block { width:100%; height:152px; }
}




.container-fluid { padding:0 24px; margin:0 auto; }
.container-fluid-post { padding:0 24px; margin:0 auto; }
.container-fluid-full { padding:0 24px; margin:0 auto; }
.container-fluid-wide { padding:0 24px; margin:0 auto; }
@media screen and (min-width: 992px) {
  .container-fluid { max-width:1440px; padding-left:30px; padding-right:30px; } 
  .container-fluid-post { max-width:1100px; padding-left:30px; padding-right:30px; }
  .container-fluid-wide { max-width:1600px; padding-left:30px; padding-right:30px; }
  .container-fluid-full { max-width:9999px; padding-left:30px; padding-right:30px; }
}
@media screen and (min-width: 1200px) {
  /* can't use % fixed with sidenav */
  .container-fluid { max-width:1440px; padding-left:60px; padding-right:60px; } 
  .container-fluid-post { max-width:1100px; padding-left:60px; padding-right:60px; }
  .container-fluid-wide { max-width:1600px; padding-left:60px; padding-right:60px; }
  .container-fluid-full { max-width:9999px; padding-left:60px; padding-right:60px; }
}

.hold-width { max-width:50rem; margin:0 auto; }
.padding-top { padding-top:2.5rem; }
.padding-top-half { padding-top:1.25rem; }
.padding-bottom { padding-bottom:2.5rem; }
.padding-bottom-half { padding-bottom:1.25rem; }
@media all and (min-width: 992px) {
	.padding-top { padding-top:3rem; }
	.padding-top-half { padding-top:1.5rem; }
	.padding-bottom { padding-bottom:3rem; }
	.padding-bottom-half { padding-bottom:1.5rem; }
}



/* hero-image */

.op-hero-image { width:100%; }
.op-hero-image-xs { display:block; width:100%; padding-bottom:100%; background-position:center center; background-size:cover; }
.op-hero-image-md { display:none; width:100%; padding-bottom:66%; background-position:center center; background-size:cover; }
.op-hero-image-lg  { display:none; width:100%; padding-bottom:0; height:507px; background-position:center center; background-size:cover; }
.op-hero-image-xl  { display:none; width:100%; padding-bottom:0; height:700px; background-position:center center; background-size:cover; }

@media all and (min-width: 768px) {
  .op-hero-image-xs { display:none; }
  .op-hero-image-md { display:block; }
}

@media all and (min-width: 992px) {
  .op-hero-image-md { display:none; }
  .op-hero-image-lg { display:block; }
}
@media all and (min-width: 1200px) {
  .op-hero-image-lg { display:none; }
  .op-hero-image-xl { display:block; }
}


.op-hero-block, .op-hero-image, boulder-home-video {
  position:relative;
}

.op-hero-block::after, .op-hero-image::after, .boulder-home-video::after { content:''; display:block; width:100%; height:300px; position:absolute; top:0px; z-index:2; 
  background: linear-gradient(
    to bottom,
   hsla(0, 0%, 0%, 0.7) 0%,
    hsla(0, 0%, 0%, 0.691) 8.1%,
    hsla(0, 0%, 0%, 0.666) 15.5%,
    hsla(0, 0%, 0%, 0.627) 22.5%,
    hsla(0, 0%, 0%, 0.577) 29%,
    hsla(0, 0%, 0%, 0.519) 35.3%,
    hsla(0, 0%, 0%, 0.454) 41.2%,
    hsla(0, 0%, 0%, 0.385) 47.1%,
    hsla(0, 0%, 0%, 0.315) 52.9%,
    hsla(0, 0%, 0%, 0.246) 58.8%,
    hsla(0, 0%, 0%, 0.181) 64.7%,
    hsla(0, 0%, 0%, 0.123) 71%,
    hsla(0, 0%, 0%, 0.073) 77.5%,
    hsla(0, 0%, 0%, 0.034) 84.5%,
    hsla(0, 0%, 0%, 0.009) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
};

/* https://larsenwork.com/easing-gradients/*/


/* corner callout */

.corner-callout { 
  position: fixed;
  z-index: 1001;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width:440px;
  padding: 1rem 1rem 1.5rem 1.5rem;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(0,0,0,.2);
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
  animation-delay: 0.95s; /* Optional: delay before fade starts */
  background-color:white;
  color:inherit;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Respect user's motion preferences 
@media (prefers-reduced-motion: reduce) {
  .corner-callout {
    animation: none;
    opacity: 1;
  }
}

.corner-callout-headline { font-weight:700; font-size:1.1rem; margin-bottom:0.5rem; text-wrap:balance; }
.corner-callout-text { font-weight:400; font-size:0.9rem; margin-bottom:0.5rem; text-wrap:balance; }
.corner-callout-cta { margin-bottom:0; }

.corner-dismiss { 
  position:absolute; 
  top:10px; 
  right:10px;
  display:block; 
  margin:0; padding:0; border: none;
  width:30px; height:30px; 
  text-align:center; 
  background-color:inherit; 
  color:inherit; 
  font-size:22px; 
  line-height:30px; 
}

*/