#content{
  padding-top:0px;
  width:100%;
  display:block;
  margin:auto;
}

.bg-wrap{
  width:100%;
  background-color:#333;
}

.foot-wrap{
  width:100%;
  background-color:#242424;
  float:left;
}

#charts{
  padding:10px;
}

.chart{
  height:340px;
  max-height:400px;

  max-width:880px;
  margin:0 auto 32px auto;
  padding:8px;

  background:#fff;
  border:1px solid #ececec;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

img.cg,
img.bg {

  max-width:930px;
  /*max-height:550px;*/
  height:auto;

  display:block;
  margin:auto;
}

img.cg{
  max-width:930px;
  /*max-height:550px;*/
  height: auto;
  margin:auto;
}

.header-wrap header{
  text-align:center;
  width:100%;
  display:block;
  margin:auto;
}

#header-title{
  padding-top:60px;
  padding-left:20px;
  padding-right:20px;
}

#header-sub-title{
  padding-top:0px;
  padding-bottom: 40px;
}

.full-width-content{
  width:100%;
  height:auto;
  float:left;
  text-align:center;
  display:block;
  padding-left:auto;
  padding-right:auto;
  padding-top:40px;
  padding-bottom:40px;
}

.textual-content{
  width:60%;
  height:auto;
  text-align:left;
  display:block;
  margin: auto;
}

/* Breathing room when a text section sits directly under the full-bleed hero
   image at the top of a page (otherwise the heading is flush against the
   photo). Scoped to a class so the index page's flush dark weather bar under
   its images is unaffected. */
.textual-content.top-gap{
  padding-top:40px;
}

.box{
  text-align:center;
  font-size:28px;
  padding:30px;
  display:inline-block;
  margin:auto;
}

/* Sponsor section: a light-gray band that stands apart from the dark
   image/weather group above and the white charts below. Each logo sits on
   its own white card, so the sponsor images always have white behind them. */
.sponsors{
  background:#f4f4f5;
  border-top:1px solid #e6e6e6;
  border-bottom:1px solid #e6e6e6;
}

.sponsor {
  max-width:250px;
  height:auto;
  margin:20px auto 12px auto;
  padding:18px 22px;

  background:#fff;
  border:1px solid #ececec;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
}

.sponsor img{
  vertical-align:middle;
}

.white {
  color: white;
}

.weather a,
.weather a:link,
.weather a:visited,
.weather a:hover,
.weather a:active { 
  color: #0AA;
  text-decoration: underline;
}


.weather a:hover {
  text-decoration:none;
}

/* current-weather bar — sits directly under the webcam images.
   Flexbox so the metrics space evenly and wrap gracefully on any width. */
.weather-wrap{
  width:100%;
  background:#333;
  /* hairline divider so the data reads as its own panel below the images */
  border-top:1px solid rgba(255,255,255,0.08);
}

.weather{
  max-width:1100px;
  margin:0 auto;
  padding:28px 20px 22px;
  color:#0AA;
}

.weather-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:20px 36px;
}

.metric{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1 1 130px;
  min-width:110px;
  max-width:220px;
}

.metric-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#5bc2c2;
}

.metric-value{
  margin-top:6px;
  font-size:26px;
  line-height:1.25;
  font-weight:600;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.weather-updated{
  margin-top:22px;
  text-align:center;
  font-size:14px;
  color:#0AA;
  opacity:0.8;
}

@media only screen and (max-width:767px){
  .weather{ padding:20px 14px 18px; }
  .weather-grid{ gap:16px 22px; }
  .metric{ flex-basis:40%; min-width:90px; }
  .metric-value{ font-size:21px; }
}

.map {
  height: 650px;
  pointer-events: none;
}


@media only screen and (max-width:767px) {

  /*body {background-color:cyan;}*/

  body {
    font: 20px/35px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  img.cg,
  img.bg {
    max-width:100%;
    /*max-height:600px;*/
    height:auto;
  }

  .textual-content{
    width:90%;
  }

  .chart{
    height:260px;

    width:100%;
    max-width:100%;
    margin:0 auto 20px auto;
    padding:6px;
  }

}

@media only screen and (max-device-height:767px) {

  /*body {background-color:pink;}*/

  body {
    font: 20px/35px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  img.cg,
  img.bg {
    max-width:100%;
    /*max-height:400px;*/
    height:auto;
  }

  .textual-content{
    width:90%;
  }

  .chart{
    height:260px;

    width:100%;
    max-width:100%;
    margin:0 auto 20px auto;
    padding:6px;
  }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {

  /*body {background-color:red;}*/

  img.cg,
  img.bg {
    /*max-height:1280px;*/
    max-width:1280px;
    height:auto;
  }

  .textual-content{
    width:40%;
  }

}