/*

Neue Haas Grotesk Display Pro

<link rel='stylesheet' href='https://use.typekit.net/yds4kkk.css'>

font-family: 'neue-haas-grotesk-display', sans-serif;

font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 900;

Avenir Next Condensed

font-family: 'avenir-next-lt-pro-condensed', sans-serif;

font-weight: 400;
font-weight: 400; font-style: italic;
font-weight: 500;
font-weight: 700;
font-weight: 700; font-style: italic;
font-weight: 800;

*/


:root {
  --cc-amp-black: #4f4f4f; /* #565656 */
  --cc-amp-blue: #5F789B; /* #617C9F; */
  --cc-amp-gold: #E8BD72;
  --cc-amp-gold-light: #F4DFBA;
}

#page-amp .container-hold { width:100%; max-width:900px; }

footer { border-top:4px solid var(--cc-amp-blue); }
footer a { text-decoration:underline!important; }
footer a:hover { text-decoration:underline!important; }

#page-amp { 
  color:var(--cc-amp-black); 
  font-family: 'avenir-next-lt-pro-condensed', sans-serif;
}
#page-amp {

  h1 { font-family: 'neue-haas-grotesk-display', sans-serif; color:inherit;  font-weight:900; font-size: 3.25rem; line-height:1.25; margin-top:0; margin-bottom:0.4rem; }
  h2 { font-family: 'neue-haas-grotesk-display', sans-serif; color:inherit;  font-weight:900; font-size: 2.1rem; line-height:1.25; margin-top:0; margin-bottom:0.4rem; }
  h3 { font-family: 'neue-haas-grotesk-display', sans-serif; color:inherit;  font-weight:900; font-size: 1.2rem; line-height:1.25; margin-top:0; margin-bottom:0.4rem; }
  
  p,li { font-weight:500; font-size:1.25rem; line-height:1.45; margin-top:0; margin-bottom:1rem; }
  p.intro { font-family: 'neue-haas-grotesk-display', sans-serif; font-weight:600; line-height:1.45; }


  .big-intro {
    h1 { margin:0; line-height:1; }
    h2 { font-family: 'avenir-next-lt-pro-condensed', sans-serif; font-weight:600; font-size:1.3rem; line-height:1.45; margin:1rem 0; }
  }
  .h-blue {
    h2 { color:var(--cc-amp-blue); }
  }

  .btn-brand { 
    background-color:var(--cc-amp-gold); 
    border:1px solid var(--cc-amp-gold);
    color:var(--cc-amp-black);
    font-weight:700;
    text-decoration:none;
    font-size:1rem; line-height:1rem; letter-spacing:0.010rem;
    padding: 0.5rem 1rem; 
    border-radius:0.25rem;
    transition: all 0.15s linear 0s; 
   }
  .btn-brand:hover { 
    background-color:var(--cc-amp-gold); 
    border-color:var(--cc-amp-gold); 
    color:black; 
    text-decoration:none;
  }

}


.fg-white { color:white; }
.fg-amp-black { color:var(--cc-amp-black); }
.fg-amp-blue { color:var(--cc-amp-blue); }
.fg-amp-gold { color:var(--cc-amp-gold); }
.fg-amp-gold-light { color:var(--cc-amp-gold-light); }

.bg-white { background-color:white; }
.bg-amp-black { background-color:var(--cc-amp-black); }
.bg-amp-blue { background-color:var(--cc-amp-blue); }
.bg-amp-gold { background-color:var(--cc-amp-gold); }
.bg-amp-gold-light { background-color:var(--cc-amp-gold-light); }

.bg-amp-blue * { color:white; }

ul.anchor-nav { margin:0; padding:1rem; list-style:none; text-align:center; }
ul.anchor-nav li { margin:0; padding:1rem 0.5rem; display:inline; font-weight: 800; font-size:1.25rem; line-height:1; text-transform:uppercase; }
ul.anchor-nav li a { text-decoration:none; display:inline-block; color:white; font-weight: 700; }
ul.anchor-nav li a:hover { text-decoration:none; color:white; }


.amp-box { 
  margin:0 0 2rem 0; 
  padding:1rem; 
  background-color:var(--cc-amp-gold-light); 
  border-radius:0.5rem;
}
.amp-box-poster {
  display:block;
  figure { margin:0; }
}
.amp-box-content {
  display:block;
  padding-top:2rem;
  text-align:left;
}

@media (min-width: 768px) {
  .amp-box {
    display: flex;
    flex-direction: row-reverse;
    gap: 2rem;
    align-items: center;
  }

  .amp-box-poster {
    flex: 0 0 auto;
    width: 40%;
  }

  .amp-box-content {
    flex: 1;
    padding:2rem;
  }
}






.h-sponors { font-family: 'neue-haas-grotesk-display', sans-serif; font-weight:900; font-size:1rem; margin:1rem 0 0 0; text-transform:uppercase; }

.cc-sponsor-logos { margin:1rem 0 0 0; }
.cc-logo { display:inline-block; margin:0px 12px 12px 0; background-color:white; }
.cc-logo span { display:block; border:2px solid #eaeaea; }
.cc-logo a { display:block; transition: all 400ms ease; border:2px solid #eaeaea; }
.cc-logo a:hover { border-color:var(--cc-amp-black); }
.cc-logo-img { width:120px; height:120px; border:16px solid #fff; background-position:center center; background-size:contain; background-repeat:no-repeat; }
@media all and (min-width: 768px) {
  .cc-logo { margin:0px 16px 16px 0; }
	.cc-logo-img { width:160px; height:160px; }
}


/* image roll */

.op-image-roll-hold { background-color:inherit; border-top:10px solid white; border-bottom:10px solid white; }

.op-image-roll .swiper-wrapper { width:100%; height:500px; position:relative; }

.op-image-roll .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.op-image-roll .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-image-roll .swiper-navigation {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  right: 30px;
  background-color: var(--cc-amp-gold);
  border-radius: 30px;
  width: 96px;
  height: 48px;
}

.op-swiper-roll-prev, .op-swiper-roll-next { 
  display:block; 
  width:48px; 
  height:48px; 
  font-size:24px; 
  line-height:48px; 
  text-align:center; 
  float:left; 
  color:var(--cc-amp-black);
}

.op-swiper-roll-prev:hover { color:black; }
.op-swiper-roll-next:hover { color:black; }






/* porchfest stages */

.stages-slider { 
  width:100%; 
  padding:2rem 0; 
}

.sw-stage { 
  background-color:var(--cc-amp-gold); 
  padding:8px 8px 8px 8px; 
  border-radius:12px; 
  width:100%; 
  text-align:center; 
  position:relative; 
  margin-top:20px;  
}

.sw-stage-digit { 
  top:-20px; left:50%; width:40px; height:40px; margin-left:-20px;
  background-color:var(--cc-amp-blue); 
  color:white; position:absolute; z-index:1; 
  font-size:16px; line-height:40px; text-align:center; font-weight:900; 
  border-radius:25px; letter-spacing:0.080rem;
}

.sw-stage-name { 
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-size:2.5rem; 
  line-height:1; 
  font-weight: 900; 
  text-wrap:balance; 
  margin-bottom:10px;
  color:white;
  margin-top:10px;

  -webkit-text-stroke: 1px #555;
  text-shadow:
    1px  1px 0 #555,
    2px  2px 0 #555,
    3px  3px 0 #555;
}

.sw-stage-add { 
  font-size:18px; 
  font-weight:700; 
  text-transform:uppercase;
  text-wrap:balance; 
  margin-top:-2px;
  margin-bottom:4px; 
}

.sw-acts { text-align:center; }
.sw-bubble { background-color:var(--cc-amp-gold-light); padding:16px 4px; border-radius:6px; margin-top:4px; }
.sw-time { font-size:14px; line-height:16px; font-weight:700; letter-spacing:0.050rem; text-transform:uppercase; }
.sw-band { color:var(--cc-amp-black); font-size:24px; line-height:1.1; font-weight: 800; margin-top:4px; margin-bottom:4px; text-wrap:balance; }
.sw-band a { text-decoration:underline; color:var(--cc-amp-black); }
.sw-band a:hover { text-decoration:underline; color:var(--cc-amp-black); }
.sw-genre { opacity:0.9; font-size:16px; line-height:1.2; font-weight: 500; margin-top:6px; text-wrap:balance; }

.sw-padding { padding:18px 0; }

button.btn-brand-a { 
  display:inline-block;
  background-color:var(--cc-amp-blue); 
  border:1px solid var(--cc-amp-blue);
  color:white;
  font-weight:700;
  text-decoration:none;
  font-size:1rem; line-height:1rem; letter-spacing:0.010rem; text-transform:uppercase; 
  padding: 0.5rem 1rem; 
  border-radius:0.25rem;
  transition: all 0.15s linear 0s; 
  }
button.btn-brand-a:hover { 
  background-color:var(--cc-amp-blue); 
  border:1px solid var(--cc-amp-blue);
  color:white; 
  text-decoration:none;
}

.btn-brand-b { 
  display:inline-block;
  background-color:white; 
  border:1px solid var(--cc-amp-blue);
  color:var(--cc-amp-blue);
  font-weight:700;
  text-decoration:none;
  font-size:1rem; line-height:1rem; letter-spacing:0.010rem; text-transform:uppercase; 
  padding: 0.5rem 1rem; 
  border-radius:0.25rem;
  transition: all 0.15s linear 0s; 
  }
.btn-brand-b:hover { 
  background-color:white; 
  border:1px solid var(--cc-amp-blue);
  color:var(--cc-amp-blue); 
  text-decoration:none;
}


/* porchfest map */

#page-amp .amp-map #clmap { width:100%; height:75vh; min-height:200px; max-height:600px; background-color:#f4f0ef; }

#page-amp .amp-map {

  .xmarker {  width: 24px; height: 36px; cursor: pointer; }
  .xmarker-bg { position:absolute; width:24px; height:36px; fill:var(--cc-amp-blue); }
  .smarker-bg-red { position:absolute; width:24px; height:36px; fill:var(--cc-amp-blue); }
  .smarker-i { position:absolute; width:24px; height:36px; text-align:center; font-size:11px; line-height:24px; color:white; }
  .xmarker-num { position:absolute; width:24px; line-height:24px; text-align:center; font-weight:900; color:white; }

  .mapboxgl-map { font-family:inherit; }

  .mapboxgl-popup { width: 240px; padding-bottom: 30px; } /* adjust padding bottom to height of marker */
  .mapboxgl-popup-content { text-align: center; padding:1.5rem; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); }
  .mapboxgl-popup-content p.mapbox-pop-name { font-family: 'neue-haas-grotesk-display', sans-serif; margin:0.4rem 0; font-weight:700; font-size:1.2rem; line-height:1.2; font-weight: 700;}
  .mapboxgl-popup-content p.mapbox-pop-address { margin:0.4rem 0; font-size:0.9rem; line-height:1.3; }
  .mapboxgl-popup-content p.mapbox-pop-link { margin:0.5rem 0; }

  .ctymarker-circle-sm { width:24px; height:24px; cursor: pointer; border-radius:12px; background-color:var(--cc-amp-blue); text-align:center; 
    font-size:12px; line-height:24px; color:white; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4); }

  .ctymarker-circle-lg { width:30px; height:30px; cursor: pointer; border-radius:16px; background-color:var(--cc-amp-blue); text-align:center; 
    font-size:15px; line-height:30px; color:#f3f9fa; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4); }

  .mapboxgl-popup { width: 240px; } 

  .mapboxgl-popup.specials-pop { padding-bottom: 8px!important; }
  .mapboxgl-popup.assets-pop { padding-bottom: 12px!important; }
  .mapboxgl-popup.stage-pop { padding-bottom: 36px!important; }

  .specials-pop .mapboxgl-popup-content { border-top:6px solid var(---cc-amp-blue); border-radius:6px; }
  .assets-pop .mapboxgl-popup-content { border-top:6px solid var(--cc-amp-blue); border-radius:6px; }
  .stage-pop .mapboxgl-popup-content { border-top:6px solid var(--cc-amp-blue); border-radius:6px; }

  .mapboxgl-popup-content { text-align: left; padding:16px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); color:var(--cc-amp-black); text-wrap:balance; }
  .mapboxgl-popup-content p.mapbox-pop-type { font-size:14px; line-height:16px; font-weight:900; letter-spacing:0.050rem; text-transform:uppercase; margin-bottom:10px; }
  .mapboxgl-popup-content p.mapbox-pop-name { margin:0; font-weight:900; font-size:1.5rem; line-height:1.1; text-wrap:balance; }
  .mapboxgl-popup-content p.mapbox-pop-address { font-family: 'avenir-next-lt-pro-condensed', sans-serif; margin:0; font-size:14px; font-weight:600; line-height:1.2; text-wrap:balance; margin-top:6px; }
  .mapboxgl-popup-content p.mapbox-pop-special { margin:0; font-size:14px; font-weight:400; line-height:1.33; text-wrap:balance; margin-top:6px; }

  .mapbox-pop-acts { font-family: 'avenir-next-lt-pro-condensed', sans-serif; margin-top:18px; margin-bottom:8px; font-size:18px; line-height:1.25; text-wrap:balance;  }
  .mapbox-pop-acts div { margin-top:4px; font-weight: 400; }
  .mapbox-pop-acts div b { font-weight:700; font-size:16px; text-transform:uppercase; }
  .mapboxgl-popup-content p.mapbox-pop-link { margin:0; }

  .mapboxgl-popup-close-button {
    display:block;
    text-align:center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
    background-color: white;
    width:24px; height:24px; 
    font-size:14px!important;
    line-height:14px!important;;
    font-weight:700;
    border-radius:12px;
    color:inherit;
    border:0;
    top:-12px; right:-12px;
    padding:0;
    margin:0;
  }
  .mapboxgl-popup-close-button:hover, .mapboxgl-popup-close-button:focus { 
    background-color: inherit;
    color:inherit;
    border:0;
  }

} /* within porchfest map */