/* Type */

/*
font-family: 'new-atten', sans-serif;
font-weight: 300;
font-style: normal;

font-family: 'new-atten', sans-serif;
font-weight: 400;
font-style: normal;

font-family: 'new-atten', sans-serif;
font-weight: 400;
font-style: italic;

font-family: 'new-atten', sans-serif;
font-weight: 500;
font-style: normal;

font-family: 'new-atten', sans-serif;
font-weight: 700;
font-style: normal;

font-family: 'new-atten', sans-serif;
font-weight: 700;
font-style: italic;

font-family: 'new-atten', sans-serif;
font-weight: 800;
font-style: normal;

/* clarendon URW 

font-family: 'clarendon-urw', serif;
font-weight: 400;
font-style: normal;

font-family: 'clarendon-urw', serif;
font-weight: 400;
font-style: italic;

font-family: 'clarendon-urw', serif;
font-weight: 500;
font-style: normal;

font-family: 'clarendon-urw', serif;
font-weight: 700;
font-style: normal;

font-family: 'clarendon-urw', serif;
font-weight: 700;
font-style: italic;

*/

html {
  font-size: 16px; /* 16 is default for most browsers*/
  font-size: clamp(16px, 4vw, 19px); /* never go below 16px, never above 24px, and scale with the viewport width in between */
}


@media screen and (min-width: 320px) {
  html { font-size: 120%; }
}
@media screen and (min-width: 992px) {
  html { font-size: 130%; }
}
@media screen and (min-width: 1600px) {
  html { font-size: 140%; }
}


body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: 'new-atten', sans-serif;
  font-optical-sizing: auto; 
  line-height:1.4;
}

.text-condensed { font-family: 'new-atten', sans-serif; }
.text-serif { font-family: 'clarendon-urw', serif; }
.text-balance { text-wrap:balance; }

/* global typography */

h1,h2,h3,h4,h5,h6 { text-wrap:balance; color:inherit; }

h1 { font-size: 3.5rem; line-height:1.05; font-weight:800; margin-top:0px; margin-bottom: 1rem; letter-spacing:-0.020rem; }
@media all and (min-width: 992px) {
  h1 { font-size: 4.5rem; }
}
h2 { font-family: 'clarendon-urw', serif; font-size: 1.618rem; line-height:1.26; font-weight:500; margin-top:1rem; margin-bottom: 1rem; }
h3 { font-size: 1.1rem; line-height:1.15; font-weight:700; letter-spacing:-0.020rem; } 

h2.on-detail { color:inherit; }
h2.on-detail { font-size: 0.85rem; font-weight:700; margin-top:1.5rem; margin-bottom: 1rem; text-transform:uppercase; letter-spacing:0.050rem; }

p, li { font-size:1rem; }
li { font-size:1rem; margin-bottom:0.25rem; } /* I like to differentiate between line height and items */
p.intro,p.lead { font-weight:inherit; font-size:1.15rem; font-weight: 400;}

label { color:inherit; }

hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top-color: currentcolor; border-top-style: none; border-top-width: 0px; border-top: 1px solid rgba(0,0,0,.1); opacity:1; }

hr.clearing-spacer { clear:both; background-color:inherit; border:0px; opacity:1; }

a { color:inherit; text-decoration:underline; }
a:hover { color:inherit; text-decoration:underline; }


.btn-longmont-subscribe { 
  background-color:transparent; 
  border:1px solid white; 
  color:white; 
  font-size:0.8rem; font-weight:800; text-transform:none; letter-spacing:0.010rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
  border-radius:0;
}
.btn-longmont-subscribe:hover { 
  background-color:#005c7a; 
  border-color:white; 
  color:white; 
  text-decoration:none; 
}

.btn-brand { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink); 
  color:white; 
  font-size:0.8rem; font-weight:800; text-transform:none; letter-spacing:0.010rem;
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
  border-radius:0;
}
.btn-brand:hover { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}

.btn-outline-brand { 
  background-color:inherit; 
  border:1px solid var(--cty-abtnlink); 
  color:var(--cty-abtnlink); 
  font-size:0.8rem; font-weight:800; text-transform:none; letter-spacing:0.010rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
  border-radius:0;
}
.btn-outline-brand:hover { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}

.btn-brand-pill { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink);  
  color:white; 
  font-size:0.8rem; font-weight:800; text-transform:none; letter-spacing:0.010rem; 
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 1rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-brand-pill:hover {  
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}

.btn-outline-brand-pill { 
  background-color:inherit; 
  border:1px solid var(--cty-abtnlink); 
  color:var(--cty-abtnlink); 
  font-size:0.8rem; font-weight:800; text-transform:none; letter-spacing:0.010rem;
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 1rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-outline-brand-pill:hover { 
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}

.btn-naked { 
  color:var(--cty-abtnlink); 
  text-transform:uppercase; 
  letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem 0rem; 
  transition:var(--cty-transition-hover);  
}
.btn-naked:hover { 
  color:var(--cty-abtnhover); 
}


.btn-brand-domino { 
  background-color:var(--cty-abtnlink); 
  border:1px solid var(--cty-abtnlink);  
  color:white; 
  font-size:0.8rem; font-weight:800; text-transform:none; letter-spacing:0.010rem;
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 1rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
  border-radius:0;
}
.btn-brand-domino:hover {  
  background-color:var(--cty-abtnhover); 
  border-color:var(--cty-abtnhover); 
  color:white; 
  text-decoration:none; 
}


/* link box */


.lk { display:table; width:100%; margin-bottom:0.75rem; padding:0.75rem; }
.lk-press { background-color:white; color:black; border:1px solid black; }
.lk-link { background-color:white; color:black; border:1px solid black; }
.lk a { text-decoration:none; color:inherit; }
.lk a:hover { text-decoration:none; color:inherit; }
.lk-arrow { display:table-cell; width:36px; vertical-align:top; font-size:1rem; line-height:1.5; color:inherit; }
.lk-content { display:table-cell; width:auto; vertical-align:top; }
.lk-content-primary { font-size:1rem; font-weight:700; margin-bottom:0.2rem; }
.lk-content-secondary { font-size:0.9rem; }




/* domino-red-triangles, as on home bottom */

.domino-red-triangles {
  .op-domino-content {
    padding:80px 50px 80px 90px;
    background:url('https://ctycms.com/co-longmont/three-red-triangles-165-165.svg') 24px 24px no-repeat;
    background-size:80px 80px;
  }
  @media all and (min-width: 992px) {
	  .op-domino-content { padding:2.5rem; padding-left:100px; background-size:90px 90px; }
  }
  @media all and (min-width: 1200px) {
    .op-domino-content { padding:3rem; padding-left:130px; background-size:130px 130px; background-position:30px 30px; }
  }
  /*
  .op-subhead { font-weight:700; font-size:0.9rem; text-transform:uppercase; margin-bottom:0.5rem; text-wrap:balance; }
  .op-headline { font-weight:700; font-size:1.2rem; margin-bottom:0.5rem; text-wrap:balance; }
  .op-text { font-size:1rem; margin-bottom:0.5rem; text-wrap:balance; }
  */
  .op-subhead {
    font-weight:800;
  }
  .op-headline {
    font-family: 'clarendon-urw', serif; font-weight:700; font-size:1.6rem;
  }
  .btn-brand-domino { 
    background-color:var(--cty-brand-blue); 
    border-color: var(--cty-brand-blue);  
  }
}