/* South Park LA Purchased Fonts */

@font-face {
  font-family: 'SP Alte Haas Grotesk';
  font-weight: 400;
  font-style: normal;
  font-display: swap; 
  src: url('https://ctycms.com/ca-social-district/_fonts/altehaasgroteskregular-webfont.woff2') format('woff2'), 
  url('https://ctycms.com/ca-social-district/_fonts/altehaasgroteskregular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'SP Alte Haas Grotesk';
  font-weight: 700;
  font-style: normal;
  font-display: swap; 
  src: url('https://ctycms.com/ca-social-district/_fonts/altehaasgroteskbold-webfont.woff2') format('woff2'), 
  url('https://ctycms.com/ca-social-district/_fonts/altehaasgroteskbold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'SP Feature Display';
  font-weight: 400;
  font-style: normal;
  font-display: swap; 
  src: url('https://ctycms.com/ca-social-district/_fonts/FeatureDisplay-Regular-Web.woff2') format('woff2'), 
  url('https://ctycms.com/ca-social-district/_fonts/FeatureDisplay-Regular-Web.woff') format('woff');
}

html {
  font-size: 16px; /* 16 is default for most browsers*/
}

@media screen and (min-width: 320px) {
  html { font-size: 112%; }
}
@media screen and (min-width: 992px) {
  html { font-size: 115%; }
}
@media screen and (min-width: 1200px) {
  html { font-size: 120%; }
}
@media screen and (min-width: 1600px) {
  html { font-size: 125%; }
}

/* not for Social District
html {
  font-size: clamp(1rem, 0.75rem + 0.75vw, 1.2rem);
}
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height:1.5;
  font-family: 'SP Alte Haas Grotesk', sans-serif;  
}

.serif { font-family: 'SP Feature Display',serif; }

/* global typography */

.text-serif { font-family:serif; }

h1,h2,h3,h4,h5,h6 { 
  text-wrap:balance; 
  color:inherit; 
  font-weight:400; 
  letter-spacing:-0.100rem; 
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  max-width: 100%;
}

h1 { font-size: 3.6rem; line-height:1.1; font-weight:400; margin-top:0; margin-bottom: 1rem; text-transform:uppercase; }
h2 { font-size: 2.2rem; line-height:1.2; font-weight:400; margin-top:1.5rem; margin-bottom: 1rem; text-transform:uppercase; }
h3 { font-size: 1.6rem; line-height:1.2; font-weight:400; margin-top:1.5rem; text-transform:uppercase; letter-spacing:0rem; margin-bottom: 1rem; } 
h2.on-detail { font-size: 0.85rem; font-weight:700; margin-top:1.5rem; margin-bottom: 1rem; text-transform:uppercase; letter-spacing:0.050rem; }

@media all and (min-width: 992px) {
  h1 { font-size:6rem; }
  h2 { font-size:3rem; }
  h3 { font-size:1.8rem; }
}

p, li { font-size:1.2rem; }
ul { list-style-type:square; }
li { margin-bottom:0.25rem; } /* I like to differentiate between line height and items */
p.intro,p.lead { font-family: 'SP Feature Display',serif; font-weight:400; font-size:2rem; letter-spacing:0; text-wrap:balance; }

label { color:inherit; }

hr { margin-top: 1.5rem; margin-bottom: 1.5rem; border: 0; border-top-color: currentcolor; border-top-style: none; border-top-width: 0px; border-top: 1px solid #e7f0f3; opacity:1; }

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

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

/* forms */

label { font-size:0.75rem; font-weight:700; }

.form-control { background-color:inherit; border-radius:0; border-color:var(--ccbrand-pacific); }
div.div-advanced-options { background-color:inherit; border-radius:0; border-color:var(--ccbrand-pacific); padding: 12px 24px; }

.form-tag {  font-size:0.75rem; font-weight:600; margin:0.5rem 0; }

.checkbox { padding-left:20px; }
.checkbox > label { font-weight:400; }

/* buttons */

.btn-brand, .btn-brand-domino { 
  background-color:var(--ccbrand-pacific); 
  border:1px solid var(--ccbrand-pacific); 
  color:var(--ccbrand-cloud);
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  border-radius:0;
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
}
.btn-brand:hover, .btn-brand-domino:hover { 
  background-color:inherit;  
  border-color:inherit;  
  color:inherit; 
  text-decoration:none; 
}

.btn-outline-brand { 
  background-color:white; 
  border:2px solid var(--ccbrand-pacific); 
  color:var(--ccbrand-pacific); 
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem;  
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
   border-radius:0;
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-outline-brand:hover { 
  background-color:var(--ccbrand-pacific);  
  border-color:var(--ccbrand-pacific);  
  color:white; 
  text-decoration:none; 
}

.btn-brand-pill { 
  background-color:var(--ccbrand-pacific); 
  border:1px solid var(--ccbrand-pacific); 
  color:var(--ccbrand-cloud);
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem; 
  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(--ccbrand-pacific);  
  border-color:var(--ccbrand-pacific);  
  color:white; 
  text-decoration:none;  
}

.btn-outline-brand-pill { 
  background-color:white; 
  border:1px solid var(--ccbrand-pacific);  
  color:var(--ccbrand-pacific); 
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem; 
  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(--ccbrand-pacific);  
  border-color:var(--ccbrand-pacific);  
  color:white; 
  text-decoration:none; 
}

.btn-naked { 
  color:inherit; 
  text-transform:uppercase; 
  letter-spacing:0.050rem; 
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.100rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem 0rem; 
  transition:var(--cty-transition-hover);  
}
.btn-naked:hover { 
  color:inherit; 
}

.add-arrow::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f178";
  padding-left:8px;
}
.add-angle::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\203a";
  padding-left:8px;
}



/* link box */


.lk { display:table; width:100%; margin-bottom:0.75rem; background-color:var(--ccbrand-cloud); padding:1rem 1rem 0.75rem 1rem; }
.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:var(--ccbrand-pacific); }
.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; }


/* button group */

.cafe-button-group { margin:1rem 0; }
.cafe-button-group button { 
  background-color:white; 
  border:1px solid var(--cty-alink); 
  color:var(--cty-alink);
  font-size:0.8rem; font-weight:700; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
}
.cafe-button-group button:hover { 
  background-color:var(--cty-ahover); 
  border-color:var(--cty-ahover); 
  color:white; 
  text-decoration:none; 
}
.cafe-button-group button.button-selected { 
  background-color:var(--cty-alink); 
  border-color:var(--cty-alink); 
  color:white; 
  text-decoration:none; 
}


@media (min-width: 1200px) {
  .op-domino-content {
    padding: 5rem;
  }
}