@font-face {
  font-family: vic;
  src: url("/fonts/vic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
}

@font-face {
  font-family: oi;
  src: url("/fonts/oi-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: noto;
  src: url("/fonts/noto-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

html {
  min-height: calc(100% + env(safe-area-inset-top));
  background: rgb(255, 255, 255);
  color-scheme: light;
  overflow-x: hidden;
}

body {
  background: rgb(255, 255, 255);
  margin: 0px;
  color: rgb(0, 0, 0);
  font-family: vic, sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: lowercase;
  overflow-x: hidden;
}

a {
  color: rgb(255, 255, 255);
}

.offline body::before {
  content: "You're offline! Reconnect for the latest.";
  display: block;
  padding: 0.8em 0px;
  text-align: center;
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  font-size: 0.8em;
  font-weight: 700;
  border-bottom: 2px solid rgb(0, 0, 0);
}

img {
  max-width: 100%;
}

a img {
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
}

.mast {
  position: relative;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding-top: calc(env(safe-area-inset-top) + 1em);
  padding-bottom: 1.5em;
}

.mast_content {
  position: relative;
}

.mast_title {
  padding: 0px;
  position: relative;
  z-index: 10;
}

.mast_logo {
  display: flex;
  align-items: flex-end;
  width: auto;
  max-width: 92%;
  margin: 0px auto;
  text-decoration: none;
  color: rgb(0, 0, 0);
  text-align: left;
  padding-left: 6.25%;
  padding-right: 6.25%;

  @media (min-width: 60em) {
    padding-right: 0px;
    padding-left: 0px;
  }
}

.mast_logo img {
  display: block;
  align-self: flex-end;
  flex-shrink: 0;
  margin-left: auto;
  margin-bottom: -2.5em;
  margin-right: -2em;
  width: 275px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(white 2px 2px 0px) drop-shadow(white -2px -2px 0px) drop-shadow(white 2px -2px 0px) drop-shadow(white -2px 2px 0px);

  @media (min-width: 50em) {
    margin-bottom: -3.2em;
    width: 400px;
  }
}

.mast_words {
  display: block;
  align-self: flex-start;
  font-size: 2.2em;
  line-height: 1.05;
  margin-bottom: 0.3em;

  @media (min-width: 50em) {
    font-size: 2.6em;
  }
}

.mast_name {
  display: block;
  margin: 0px;
  font-family: oi, vic, sans-serif;
  font-size: 0.5em;
  font-weight: 300;
  letter-spacing: 0px;
  text-transform: none;
  color: rgb(0, 0, 0);
  line-height: inherit;
  max-width: 6em;
}

.mast_desc {
  display: block;
  margin: 0px;
  font-family: vic, sans-serif;
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgb(0, 0, 0);
  line-height: 1.25;
}

@media (min-width: 35em) {
  .mast_logo img {
    width: 400px;
  }

  .mast_words {
    font-size: 2.9em;
  }
}

@media (min-width: 45em) {
  .mast_words {
    font-size: 3.2em;
  }
}

@media (min-width: 60em) {
  .mast {
    overflow: visible;
  }

  .mast_content {
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
  }

  .mast_logo {
    max-width: none;
    margin-left: 0px;
    text-align: left;
  }

  .mast_logo img {
    width: 400px;
  }

  .mast_words {
    font-size: 3.4em;
  }
}

.current_section {
  position: relative;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  margin-top: -6em;
  padding-top: 1em;

  @media (min-width: 50em) {
    margin-top: -10em;
  }
}

.current_section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 10em;
  background: url("/img/vector/white-drippy.svg") center top / 101% 6em repeat-x;
  pointer-events: none;

  @media (min-width: 50em) {
    background-size: 800px 12em;
    height: 12em;
  }
}

.current_section .vertical {
  margin-top: 0px;
}

.light_section {
  position: relative;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding-top: 0px;
  padding-bottom: 1em;
}

.light_section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 4em;
  background: url("/img/vector/black-drippy.svg") center 99% / 101% 6em repeat-x;
  transform: scaleX(-1);
  pointer-events: none;

  @media (min-width: 50em) {
    background-size: 800px 12em;
    height: 8em;
  }
}

.light_section>.vertical {
  position: relative;
  z-index: 1;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.light_section>.vertical:first-child {
  margin-top: 0px;
  padding-top: calc(7.75em);

  @media (min-width:60em) {
    padding-top: 10em;
  }
}

.light_section>.vertical:last-child {
  margin-bottom: 0px;
}

.light_section .forecast {
  margin-top: 2em;
}

@media (min-width: 20em) {

  .light_section .cams,
  .light_section .forecast {
    padding-left: 6.25%;
    padding-right: 6.25%;
  }

  .light_section .vertical_hed {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 45em) {

  .light_section .cams,
  .light_section .forecast {
    padding-left: 45px;
    padding-right: 45px;
  }

  .light_section .vertical_hed {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 60em) {

  .light_section .cams,
  .light_section .forecast {
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10em;
  }
}

@media (min-width: 80em) {

  .light_section .cams,
  .light_section .forecast {
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
    /* padding-top: 10em; */
  }
}

@media (min-width: 90em) {

  .light_section .cams,
  .light_section .forecast {
    margin-left: auto;
    margin-right: auto;
    max-width: 52em;
  }
}

.light_section .cam_name,
.light_section .cam_loc {
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 1em;
}

.light_section .snapper_nextprev {
  padding-right: 20px;
}

.light_section a {
  color: rgb(0, 0, 0);
}

.light_section .vertical_hed {
  /* margin-left: 0px; */
  /* margin-right: 0px; */
}

.light_section .vertical_hed::before {
  filter: invert(1);
}

.light_section .vertical_hed::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
}

.light_section .vertical_hed_text {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.light_section .cam_loc a,
.light_section .next-cam,
.light_section .back-cam {
  color: rgb(0, 0, 0);
}

.light_section .forecast_chart text.forecast_chart_axis,
.light_section .forecast_chart text.forecast_chart_date {
  fill: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
}

.light_section .forecast_chart text.forecast_chart_day {
  fill: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
}

.light_section .forecast_chart text.forecast-label {
  fill: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}

.vertical {
  margin: 2em 0px;
}

.vertical_hed {
  margin: 0px 20px;
  text-align: left;
  position: relative;
  font-family: vic, sans-serif;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0px;
}

.vertical_hed::before {
  content: " ";
  position: absolute;
  left: 0px;
  width: 100%;
  text-align: left;
  line-height: 50%;
  top: 50%;
  background: url("/img/vector/dividerwhite.svg") 0px 0px / 85% 1em no-repeat;
  height: 1em;
}

.vertical_hed::after {
  content: " ";
  position: absolute;
  right: 0px;
  width: 40%;
  height: 10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%);
  top: 50%;
}

.vertical_hed_text {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 0px 15px 0px 0px;
  display: inline-block;
  position: relative;
  line-height: 2;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0px;
}
.vertical_hed {
    margin: 0px 6.25% 1em;
    font-size: 1.25em;
  }
@media (min-width: 23em) {
  .vertical_hed {
    margin: 0px 6.25% 1em;
    font-size: 1.25em;
  }

  .vertical_hed_text {
    padding: 0px 20px 0px 0px;
  }
}

@media (min-width: 45em) {
  .vertical_hed {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 60em) {
  .vertical {
    margin: 0px 0px 1.5em;
  }

  .vertical_hed {
    margin: 0px;
    font-size: 1.5em;
  }
}

.current {
  position: relative;
  z-index: 1;
  padding: calc(7.75em) 20px 0px;
  margin-bottom: 0px;
}

.current .vertical_hed {
  margin: 0px;
}

.current_waves {
  padding: 2em 0px 0px;
  box-sizing: border-box;
}

.current_waves .current_metrics_hed {
  font-size: 1.5em;
  padding-bottom: 0.2em;
}

.current_waves_row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2em;
  justify-content: flex-start;
  margin-bottom: 1.5em;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



  @media (max-width: 50em) {
    gap: 1.5em 2em;
  }

  @media (min-width: 50em) {
    margin-bottom: 2em;gap: 3em;justify-content: space-between;
  }
}

.current_waves_row_item {
  display: flex;
  flex-direction: column;
}

.current_waves_row .current_metrics_pair {
  flex: 1 1 auto;
}

@media (min-width: 20em) {
  .current_waves {
    padding-right: 0px;
    padding-bottom: 1em;
  }
}

@media (min-width: 20em) {
  .current {
    padding-left: 6.25%;
    padding-right: 6.25%;
  }
}

@media (min-width: 45em) {
  .current {
    padding-left: 45px;
    padding-right: 45px;
  }
}

.current_top_metric_value,
.current_waves_height {
  font-family: oi, vic, sans-serif;
  font-size: 3em;
  font-weight: 300;
  text-transform: none;
  margin: 0px;
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.current_waves_height_unit {
  font-size: 0.555em;
  font-style: normal;
  font-weight: 300;
  display: inline-block;
  margin-left: 0.2em;
  letter-spacing: 0px;
  text-transform: lowercase;
}

@media (min-width: 23em) {
  .current_top_metric_value,
  .current_waves_height {
    font-size: 3em;
  }
}

@media (min-width: 60em) {
  .current_top_metric_value,
  .current_waves_height {
    font-size: 3em;
  }
}

.current_rating {
  padding: 0px;
  box-sizing: border-box;
  flex-direction: column;
  flex: 1 1 auto;
  margin-left: auto;
}

@media (min-width: 20em) {
  .current_rating {
    padding: 0px;
  }
}

@media (min-width: 45em) {
  .current_rating {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.current_rating_hed {
  position: absolute;
  left: -9999px;
}

.current_rating_sentiment {
  font-size: 0.8em;
  color: rgb(255, 255, 255);
  font-weight: 400;
  margin: 0px;
  line-height: 1.2;
  text-transform: none;
}

@media (min-width: 24em) {
  .current_rating_sentiment {
    font-size: 0.85em;
  }
}

@media (min-width: 35em) {
  .current_rating_sentiment {
    margin-top: 0px;
  }
}

.current_rating_stars {
  margin: 0px;
  flex-shrink: 0;
}

.stars {
  text-indent: -9999px;
  overflow: hidden;
  width: 100%;
  min-width: 160px;
  /* height: 36px; */
  background-size: contain;
  background-repeat: no-repeat;
  
  
  
  @media (max-width: 30em){
    height: 30px;
  }
}

@media (min-width: 24em) {
  .stars {
    /* height: 46px; */
  }
}

@media (min-width: 35em) {
  .stars {
    flex: 1 1 160px;
  }
}

@media (min-width: 65em) {
  .stars {
    /* max-width: 180px; */
  }
}

.current_rating_sentiment {
  font-size: calc(1.3125em);
  text-transform: lowercase;
  padding-bottom: 0.5em;
}

.stars-1 {
  background-image: url("/img/vector/stars-1.png");
}

.stars-1 {
  background-image: url("/img/vector/stars-1.svg");
}

.stars-2 {
  background-image: url("/img/vector/stars-2.png");
}

.stars-2 {
  background-image: url("/img/vector/stars-2.svg");
}

.stars-3 {
  background-image: url("/img/vector/stars-3.png");
}

.stars-3 {
  background-image: url("/img/vector/stars-3.svg");
}

.stars-4 {
  background-image: url("/img/vector/stars-4.png");
}

.stars-4 {
  background-image: url("/img/vector/stars-4.svg");
}

.stars-5 {
  background-image: url("/img/vector/stars-5.png");
}

.stars-5 {
  background-image: url("/img/vector/stars-5.svg");
}

.current_metrics {
  display: flex;
  margin: 0px;
  padding: 0px;
  width: 100%;
  flex-wrap: wrap;
  gap: 1em 2em;
  justify-content: flex-start;
}

.current_metrics_pair {
  display: table-cell;
  /* width: 1%; */
  text-align: left;
  vertical-align: top;
  font-size: 0.75em;
  /* min-width: min-content; */
  flex: 1 1 auto;
}

.current_metrics_hed {
  display: block;
  margin: 0px;
  color: rgb(255, 255, 255);
  font-family: vic, sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
  font-size: 1.5em;
  line-height: 1.2;
  white-space: nowrap;
  padding-bottom: 0.2em;
}

.current_metrics_value {
  display: block;
  margin: 0.15em 0px 0px;
  color: rgb(255, 255, 255);
  font-family: oi, vic, sans-serif;
  font-weight: 300;
  letter-spacing: 0px;
  text-transform: none;
  font-size: 2.8em;
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
  @media (min-width: 45em) {
    font-size: 3.2em
  }
}

.current_metrics_unit {
  font-size: 0.5em;
}
.current_metrics_units-stack {
  display: inline-flex;
  flex-direction: column;
  vertical-align: bottom;
  margin-left: 0.2em;
  line-height: 0.92;
}

@media (min-width: 23em) {
  .current_metrics_pair {
    font-size: 0.875em;
  }
}

@media (min-width: 45em) {
  .current_metrics_pair {
    text-align: left;
  }
}

@media (min-width: 60em) {
  .current_metrics {
    width: 100%;
  }
}

.current_sources {
  padding: 0.3em 0px 0px;
  overflow: hidden;
  margin: 1em 0px 0px;
  text-align: center;
  background: rgb(0, 0, 0);
  border-radius: 5px;
}

.current_sources_hed {
  font-size: 0.65em;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  margin: 0.4em 0.8em 0.2em 0px;
  vertical-align: top;
}

.current_sources_list,
.current_sources_listitem,
.current_sources_listitem_img {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.current_sources_listitem_img img {
  height: 22px;
  display: inline-block;
  margin-right: 5px;
  object-fit: contain;
}

.current_sources_listitem_img:hover img {
  opacity: 1;
}

.current_sources_listitem_img:last-child {
  margin: 0px;
}

@media (min-width: 45em) {
  .current_sources {
    margin-top: 2em;
  }

  .current_sources_hed {}
}

@media (min-width: 50em) {
  .current {
    padding-top: 13em;
  }
}

@media (min-width: 60em) {
  .current_sources {
    width: 100%;
    padding: 0.7em 0px 0.4em;
    text-align: left;
    background: none;
    border-width: 1px medium medium;
    border-style: dashed none none;
    border-color: rgb(255, 255, 255) currentcolor currentcolor;
    border-image: initial;
    border-radius: 0px;
    margin: 1.5em 0px 1em;
  }

  .current_sources_hed {
    font-size: 0.75em;
    margin-right: 1em;
  }

  .current_sources_listitem_img img {
    height: 28px;
  }
}

.upcoming_tides {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 4em 0 0;
  font-size: 0.875em;
  box-sizing: border-box;
  padding: 0;
  justify-content: center;
}

@media (max-width: 30em) {
  .upcoming_tides {
    margin-top: 2em;
    
  }
}

@media (min-width: 60em) {
  .upcoming_tides {
    /* font-size: 0.875em; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

.upcoming_summary {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1em 1em;
  margin: 0 0 1em;
  padding: 0;
  flex-wrap: wrap;
  padding-top: .5em;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  div {
    
  }
  @media (max-width: 40em) {
    display: block;
    div {
      margin-bottom: 1em;
      
    }
  }
}

.upcoming_summary dt,
.upcoming_summary dd {
  margin: 0;
  padding: 0;
  color: rgb(255, 255, 255);
  font-family: noto, sans-serif;
  font-size: .9em;
  text-transform: lowercase;
  @media (min-width: 50em) {
    font-size: 1em;
  }
}
.upcoming_summary dt {
  background: #fff;
  width: max-content;
  padding: .2em .4em;
  align-self: top;
  border-radius: .4em;
  color: #000;
  
  
}

.upcoming_summary_heading {
  margin: .5em 1em .5em 0;
  flex: 1;
  /* max-width: min-content; */
  display: none;
}

.upcoming_summary_item {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  transform: skew(-5deg, -10deg);
}

.upcoming_summary dt {
  font-weight: 600;
}

.slice_shop {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2em 0 0;
  box-sizing: border-box;
  text-align: center;
  /* margin-bottom: -3em; */
}

.slice_shop_link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1.2em 2em;
  padding-left: 5em;
  background-color: #fff;
  background-image: url("/img/vector/slice.webp");
  background-repeat: no-repeat;
  background-position: left 1.25em center;
  background-size: auto 72%;
  color: #000;
  font-family: oi, vic, sans-serif;
  font-weight: 300;
  /* font-size: 1.5em; */
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0px;
  border: 1px double #fff;
  font-size: .9em;
  /* padding-top: 1em; */
  /* padding-bottom: 1em; */
  text-align: center;
  width: max-content;
  border-radius: 3em;
  border: 4px solid #000;
  outline: 4px dotted #fff;
  transition: all .3s;
  margin: auto;
  
  
  
  




















 

  @media (max-width: 25em) {
    font-size: .8em;
  }

  @media (max-width: 22em) {
    font-size: .7em;
  }

  @media (min-width: 60em) {
    font-size: 1em;
  }
}

.slice_shop_link:hover,
.slice_shop_link:focus {
  transform: scale(1.1);
}

@media (min-width: 60em) {
  .current {
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 15em;
    padding-bottom: 1em;
  }

  .slice_shop {
    padding: 3em 0 0;
    /* border: 3px dotted #fff; */
    /* background: #000; */
  }

  .slice_shop {
    /* font-size: 1.3em; */
    /* padding-top: 1em; */
    /* padding-bottom: 1em; */
    /* text-align: center; */
    /* width: max-content; */
    margin-bottom: -1em;
  }
}

.next-cam,
.back-cam {
  position: absolute;
  right: 1em;
  top: 0.3em;
  font-family: noto, sans-serif;
  text-transform: none;
}

.snapper_items {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow: auto;
  overscroll-behavior: none;
}

.snapper_item {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 100%;
}

.snapper_item img {
  width: auto;
}

.snapper_nextprev,
.snapper_nextprev_item {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.snapper_nextprev {
  position: absolute;
  top: 1em;
  right: 0px;
  width: 50px;
  background: rgb(0, 0, 0);
  overflow: hidden;
  padding: 0px 20px 0px 5px;
  display: flex;
}

.snapper_nextprev_item {
  flex: 1 1 0%;
  height: 27px;
}

.snapper_nextprev_next,
.snapper_nextprev_prev {
  display: block;
  height: 25px;
  overflow: hidden;
  text-indent: -999px;
  cursor: pointer;
}

.snapper_nextprev_next {
  background: url("/img/vector/tri-green-right.png") 80% 50% no-repeat;
}

.snapper_nextprev_prev {
  background: url("/img/vector/tri-green-left.png") 20% 50% no-repeat;
}

.snapper_nextprev_next {
  background-image: url("/img/vector/tri-green-right.svg");
}

.snapper_nextprev_prev {
  background-image: url("/img/vector/tri-green-left.svg");
}

.snapper_nextprev_next:hover {
  background-position: 100% 50%;
}

.snapper_nextprev_prev:hover {
  background-position: 0px 50%;
}

@media (min-width: 20em) {
  .snapper_nextprev {
    padding-right: 6.25%;
  }

  .vertical-cams .vertical_hed {
    margin-left: 6.25%;
    margin-right: 6.25%;
  }
}

@media (min-width: 45em) {
  .snapper_nextprev {
    padding-right: 45px;
  }

  .vertical-cams .vertical_hed {
    margin-left: 45px;
    margin-right: 45px;
  }

  .cams {
    margin-top: 0px;
  }
}

@media (min-width: 60em) {
  .vertical-cams .vertical_hed {
    margin-left: 0px;
    margin-right: 0px;
  }

  .cams {
    margin-top: 0px;
  }
}

@media (min-width: 20em) {

  .light_section .vertical-cams .vertical_hed,
  .light_section .vertical-forecast .vertical_hed {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 45em) {

  .light_section .vertical-cams .vertical_hed,
  .light_section .vertical-forecast .vertical_hed {
    margin: 1em 0px;
  }
}

.cam {
  margin: 1em 0px 0px;
  text-align: left;
  position: relative;
}

.cam_name,
.cam_loc {
  display: inline-block;
  margin: 0px;
}

.cam_name {
  font-size: 0.75em;
  font-weight: 400;
  margin-left: 20px;
}

.cam_name::before {
  background: url("/img/vector/pin.svg") 0px 50% no-repeat;
  width: 9px;
  height: 16px;
  display: inline-block;
  margin-right: 0.6em;
  top: 0.4em;
  position: relative;
}

.cam_loc {
  font-size: 0.6875em;
  font-weight: 400;
  margin-right: 20px;
}

.cam_loc a {
  color: rgb(255, 255, 255);
}

@media (min-width: 22em) {
  .cam_name {
    margin-left: 6.25%;
  }

  .cam_loc {
    margin-right: 6.25%;
  }
}

@media (min-width: 45em) {
  .cam_name {
    margin-left: 45px;
    font-size: 0.875em;
  }

  .cam_loc {
    margin-right: 45px;
    font-size: 0.875em;
  }
}

.cam_wrap {
  position: relative;
  width: 100%;
  height: 0px;
  margin: 1em 0px 0px;
  padding-top: 56.3867%;
  background: rgb(0, 0, 0);
  overflow: hidden;
  filter: grayscale(100%);
}

.snapper_pane_crop {
  border: 4px solid rgb(0, 0, 0);
  border-radius: 1em;
  overflow: hidden;
}

.cam_video,
.cam_img,
.cam_flash,
.cam_iframe {
  width: 100%;
  left: 0px;
  top: 0px;
  bottom: 0px;
  border: 0px;
  display: block;
  position: absolute;
}

.cam_iframe {
  height: 100%;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  max-width: 100%;
}

.cam_img img {
  width: 100%;
}

.offline .cam_wrap {
  background: rgb(0, 0, 0);
  position: relative;
}

.offline .cam_wrap::before {
  content: "Connect online to view cams.";
  position: absolute;
  width: 100%;
  top: 90px;
  text-align: center;
  line-height: 50px;
  color: rgb(255, 255, 255);
  font-size: 1em;
  font-weight: 400;
}

.cam_wrap-video .cam_img,
.cam_wrap-video .cam_flash,
.cam_wrap-video .cam_iframe,
.offline .cam_wrap div,
.offline .cam_wrap iframe,
.offline .cam_wrap video {
  visibility: hidden;
}

.cam_wrap-flash .cam_img,
.cam_wrap-flash .cam_video,
.cam_wrap-flash .cam_iframe {
  display: none;
}

.cam_wrap-img .cam_flash,
.cam_wrap-img .cam_video,
.cam_wrap-img .cam_iframe {
  display: none;
}

.cam_wrap-iframe .cam_flash,
.cam_wrap-iframe .cam_video,
.cam_wrap-iframe .cam_img {
  display: none;
}

.cam_play {
  position: absolute;
  top: 50%;
  border: 0px;
  left: 50%;
  margin-left: -26px;
  margin-top: -26px;
  width: 52px;
  height: 52px;
  background: url("/img/vector/play.png") 0px 0px no-repeat;
  transition: opacity 0.2s linear;
  display: none;
}

.cam_play {
  display: block;
}

.cam_play {
  background-image: url("/img/vector/play.svg");
}

.cam_play[data-on] {
  opacity: 0;
}

@media (min-width: 60em) {
  .cams {
    margin-top: 0px;
  }
}

@media (min-width: 22em) {
  .forecast .vertical_hed {
    margin-left: 6.25%;
    margin-right: 6.25%;
  }
}

@media (min-width: 45em) {
  .forecast .vertical_hed {
    margin: 0.75em 45px 0px;
  }

  .cam_play {
    margin-left: -38px;
    margin-top: -38px;
    width: 76px;
    height: 76px;
    background-size: 76px 76px;
  }
}

.forecast_contain {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 1em 0px;
}

.forecast_contain_scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2em;
  -webkit-overflow-scrolling: touch;
}

svg.forecast_chart.forecast_chart_yoverlay {
  position: absolute;
  left: 0px;
  z-index: 10;
  top: auto;
  pointer-events: none;
}

.forecast_chart {
  font-size: 1em;
  min-width: 800px;
  width: 100%;
  height: auto;
  display: none;
}

.forecast_chart {
  display: block;
  overflow: visible;
}

.forecast_chart text {
  pointer-events: none;
}

.forecast_chart text.forecast_chart_axis,
.forecast_chart text.forecast_chart_date {
  font-family: noto, sans-serif;
  font-weight: 600;
  fill: rgb(0, 0, 0);
}

.forecast_chart text.forecast_chart_day {
  font-family: vic, sans-serif;
  font-weight: 700;
  fill: rgb(0, 0, 0);
  text-transform: lowercase;
  letter-spacing: 0px;
}

.forecast_chart text.forecast-label {
  font-family: noto, sans-serif;
  font-weight: 600;
  fill: rgb(255, 255, 255);
}

.forecast_contain-fixscale .forecast_chart {
  position: absolute;
  top: 0px;
  height: 100%;
  left: 0px;
}

.v-line,
.forecast-label,
circle {
  opacity: 0;
}

.v-line-mid {
  opacity: 0;
  pointer-events: none;
}

.forecast_chart_fill {
  fill: rgb(0, 0, 0);
  opacity: 1;
}

polyline,
circle {
  pointer-events: none;
}

.ttfocused,
.ttfocused+circle,
.ttfocused+circle+rect,
.ttfocused+circle+rect+text {
  opacity: 1;
}

.ttfocused-mid {
  opacity: 1;
}

.tt-circle.ttactive,
.tt-flag.ttactive {
  opacity: 1;
}

.tt-flag {
  opacity: 0;
  pointer-events: none;
}

.forecast_contain input,
.forecast_contain label {
  display: none;
}

.forecast_contain input,
.forecast_contain label {
  display: inline-block;
  font-size: 0.8em;
}

.forecast_location_hed {
  display: inline-block;
  margin: 0px 0px 0px 20px;
  font-size: 0.75em;
  font-weight: 400;
}

.forecast_location_hed::before {
  content: " ";
  background: url("/img/vector/pin.svg") 0px 50% no-repeat;
  width: 9px;
  height: 16px;
  display: inline-block;
  margin-right: 0.6em;
  top: 0.4em;
  position: relative;
}

input[name="location"] {
  position: absolute;
  margin: 0.3em;
  opacity: 0.0001;
}

input[name="location"]+label {
  padding: 0.4em 0.8em;
  background: transparent;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 0.7em;
  display: inline-block;
  margin: 1.3em 0px 0px 0.5em;
  cursor: pointer;
  color: rgb(255, 255, 255);
}

input[name="location"]:checked+label {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: 1px solid rgb(255, 255, 255);
}

input[name="location"]:focus+label {
  box-shadow: rgb(255, 255, 255) 0px 0px 5px;
  border: 1px solid rgb(255, 255, 255);
}

input~.forecast_contain .forecast_chart_group {
  opacity: 0;
  transition: opacity 0.5s linear;
  position: relative;
  z-index: 100;
}

input#loc-30a:checked~.forecast_contain .forecast_chart_group-30a,
input#loc-destin:checked~.forecast_contain .forecast_chart_group-destin,
input#loc-pcb:checked~.forecast_contain .forecast_chart_group-pcb {
  opacity: 1;
}

@media (min-width: 22em) {
  .forecast_location_hed {
    margin-left: 6.25%;
  }
}

@media (min-width: 45em) {
  .forecast_location_hed {
    margin-left: 45px;
    font-size: 0.875em;
  }
}

@media (min-width: 60em) {
  .forecast_location_hed {
    margin-left: 0px;
  }
}

.forecast_text {
  position: absolute;
  left: -9999px;
  height: 0px;
  width: 0px;
  overflow: hidden;
}

.forecast_chart_line {
  stroke-linecap: round;
  fill: rgb(136, 136, 136);
  stroke: rgb(255, 255, 255);
  stroke-width: 1.5px;
}

.forecast_chart_line_min {
  stroke: rgb(255, 255, 255);
  stroke-width: 1.5px;
  fill: rgb(136, 136, 136);
  stroke-linecap: round;
}

.forecast_chart_line_pcb {
  stroke: rgb(255, 255, 255);
  opacity: 0.6;
  stroke-width: 1px;
  fill: transparent;
  stroke-dasharray: 5px;
}

.forecast_chart_line_destin {
  stroke: rgb(255, 255, 255);
  opacity: 0.6;
  stroke-width: 1px;
  fill: transparent;
  stroke-dasharray: 5px;
}

.forecast_chart_hline {
  stroke: rgb(255, 255, 255);
  opacity: 0.2;
  stroke-width: 1px;
}

.forecast_chart_vline {
  stroke: rgb(255, 255, 255);
  stroke-width: 1px;
}

@media (min-width: 45em) {
  .light_section .forecast .vertical_hed {
    margin-top: 0.75em;
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 60em) {
  .forecast {
    padding-top: 0.75em;
    margin-right: 6.25%;
    margin-left: 6.25%;
  }

  .forecast .vertical_hed {
    margin: 0px;
  }
}

.forecast_text {
  margin: 1em 0px;
}

.forecast_text_hed {
  font-size: 0.8em;
  font-weight: 700;
  background: rgb(0, 0, 0);
  padding: 0.5em 6.25%;
  margin: 0px;
}

.forecast_text_item {
  font-size: 0.8em;
  font-weight: 400;
  background: rgb(0, 0, 0);
  padding: 0.5em 6.25%;
  margin: 0px;
  line-height: 1.7;
}

.forecast_text_item strong {
  font-weight: 700;
}

.forecast_text_item:nth-child(2n+1) {
  background: rgb(0, 0, 0);
}

@media (min-width: 60em) {

  .forecast_text_hed,
  .forecast_text_item {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.locals {}

.locals_posts {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.locals_post {
  list-style: none;
}

.locals_post_contain {
  position: relative;
  padding: 0.8em 20px;
}

.locals .snapper_nextprev {
  top: 1em;
  padding-top: 1.2em;
  padding-left: 10px;
}

.locals_post_by {
  font-size: 0.875em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
}

.locals_posts .locals_post_by_img {
  width: 28px;
  max-width: none;
  height: 28px;
  flex-shrink: 0;
  border-radius: 100%;
  overflow: hidden;
  border: 2px solid rgb(255, 255, 255);
}

.locals_post_by::before {
  content: " ";
  background: url("/img/vector/tri-dark-downright.svg") 0px 0px no-repeat;
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: 2px;
  left: 22px;
}

.locals_post_by_name {
  margin-top: 1.1em;
  font-weight: 700;
  display: inline-block;
  color: rgb(255, 255, 255);
}

.locals_post_time {
  margin-top: 1.1em;
  display: inline-block;
  color: rgb(255, 255, 255);
  font-weight: 400;
}

.locals_post_content {
  display: block;
  font-size: 0.8125em;
  font-weight: 400;
  white-space: normal;
  color: rgb(255, 255, 255);
  padding: 0px 0px 83%;
  position: relative;
}

.locals_post_content p,
.locals_post_content p p {
  font-size: 1em;
  white-space: normal;
  margin: 0px;
  padding: 0px;
}

.locals_post_content a {
  display: block;
  max-height: 83%;
  overflow: hidden;
}

.locals_post_content p>img,
.locals_post_content a {
  max-width: 100%;
  width: auto;
  display: block;
  position: absolute;
  bottom: 0px;
  border: 6px solid rgb(255, 255, 255);
  box-shadow: rgb(255, 255, 255) 0px 0px 3px;
}

.locals_post_content a:hover {
  box-shadow: rgb(255, 255, 255) 0px 0px 8px;
}

.locals_post_content img:nth-of-type(2),
.locals_post_content a:nth-of-type(2) {
  transform: rotate(2deg) translateY(5px) translateZ(0px);
}

.locals_post_content img:nth-of-type(3),
.locals_post_content a:nth-of-type(3) {
  transform: rotate(4deg) translateY(8px) translateZ(0px);
}

.locals_post_content img:nth-of-type(4),
.locals_post_content a:nth-of-type(4) {
  transform: rotate(6deg) translateY(11px) translateZ(0px);
}

.locals_post_content img:nth-of-type(5),
.locals_post_content a:nth-of-type(5) {
  transform: rotate(12deg) translateY(14px) translateZ(0px);
}

@media (min-width: 22em) {
  .locals_post_contain {
    padding: 0.8em 0px;
  }

  .locals_post_by,
  .locals_post_content {
    margin-left: 6.25%;
    margin-right: 6.25%;
  }

  .locals_post_content {
    font-size: 0.9em;
    padding: 0px 0px 73%;
  }

  .locals_post_content a {
    max-height: 73%;
  }
}

@media (min-width: 28em) {
  .locals_post_content {
    padding: 0px 0px 60%;
  }
}

@media (min-width: 35em) and (max-width: 60em) {
  .locals_post_contain {
    padding: 0.8em 0px;
  }

  .locals_post_content {
    padding: 0.5em 0px 0px 40%;
    min-height: 11em;
  }

  .locals_post_content p>img,
  .locals_post_content a {
    bottom: auto;
    top: 0px;
    left: 4px;
    max-width: 36%;
  }

  .locals_post_content a {
    max-height: 80%;
  }

  .locals_post_content img:nth-of-type(2),
  .locals_post_content a:nth-of-type(2),
  .locals_post_content img:nth-of-type(3),
  .locals_post_content a:nth-of-type(3),
  .locals_post_content img:nth-of-type(4),
  .locals_post_content a:nth-of-type(4) {
    left: 15px;
  }
}

@media (min-width: 60em) {
  .locals {
    position: relative;
    top: auto;
    margin-top: 2em;
    margin-left: 6.25%;
    margin-right: 6.25%;
    max-width: 42em;
  }

  .locals_post_by,
  .locals_post_content {
    margin-left: 0px;
    margin-right: 0px;
  }

  .locals_post_content a {
    max-width: 80%;
    left: 6px;
  }

  .locals_post_content img:nth-of-type(2),
  .locals_post_content a:nth-of-type(2),
  .locals_post_content img:nth-of-type(3),
  .locals_post_content a:nth-of-type(3),
  .locals_post_content img:nth-of-type(4),
  .locals_post_content a:nth-of-type(4) {
    left: 15px;
  }
}

.locals_post_content-textonly {
  padding: 1em 43px 0px;
}

.locals_post_content-textonly p {
  font-size: 1.15em;
  line-height: 1.7;
  font-weight: 400;
}

.vertical_hed-sponsors-contrib i {
  font-size: 0.95em;
  color: rgb(255, 255, 255);
}

.sponsors_list,
.sponsors_listitem {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.sponsors_contain {
  margin: 1em 20px 0px;
}

.sponsors_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.sponsors_listitem {
  flex: 1 1 calc(33.333% - 10px);
  vertical-align: middle;
  margin-top: 10px;
  box-sizing: border-box;
}

.sponsors_listitem img {
  max-height: 50px;
  max-width: 100%;
  margin: 0px auto;
  display: block;
}

.sponsors_listitem-official img {
  max-height: 70px;
  max-width: 100%;
}

@media (min-width: 22em) {

  .sponsors .vertical_hed,
  .sponsors_contain {
    margin-left: 6.25%;
    margin-right: 6.25%;
  }
}

@media (min-width: 45em) {
  .sponsors {
    width: auto;
  }

  .sponsors_listitem {
    flex: 1 1 calc(20% - 10px);
    max-width: 20%;
    margin-top: 20px;
  }

  .sponsors_listitem img {
    max-height: 60px;
  }

  .sponsors_listitem-official img {
    max-height: 70px;
    max-width: 100%;
  }

  .sponsors .vertical_hed,
  .sponsors_contain {
    margin-left: 45px;
    margin-right: 45px;
  }

  .sponsors_listitem-official img.sponsors_img-horiz {
    min-width: 90px;
  }
}

@media (min-width: 60em) {
  .sponsors {
    position: relative;
    margin: 2em 6.25% 3em;
    max-width: 42em;
  }

  .sponsors_contain {
    margin-top: 1.5em;
  }

  .sponsors .vertical_hed,
  .sponsors_contain {
    margin-left: 0px;
    margin-right: 0px;
  }
}

.footer {
  position: relative;
  margin: 0px;
  padding: calc(7.5em) 0px 1.5em;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-family: noto, sans-serif;
}

.footer::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 5em;
  background: url("/img/vector/white-drippy.svg") center bottom / 800px 10em repeat-x;
  pointer-events: none;
}




.footer_app {
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  font-weight: 400;
  width: max-content;
  margin: 0px auto 1.5em;
  font-family: noto, sans-serif;
  text-transform: lowercase;

  .install-text-fallback span {
    display: inline-block;
  background: #fff url(/img/vector/device.svg) no-repeat left .5em center;
  background-size: 1.2em auto;
  width: max-content;
  padding: .2em .5em .2em 2em;
  align-self: top;
  border-radius: .4em;
  color: #000;
  font-weight: 600;
  margin-right: .5em
  }
}
html:not(.install-supported) .install-text,
.install-supported .footer_app span.install-text-fallback {
  display: none;
}
.install-supported install {
  border-radius: .4em;
  display: block;
  margin-top: .5em;
  @media (min-width: 50em) {
    display: inline-block;
    margin-left: .5em;
    margin-top:0;
  }
}

.footer_by {
  position: relative;
  z-index: 1;
  font-size: 0.8125em;
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: 300;
  margin: 0px 0px 4em;
}

.footer_elsewhere {
  position: relative;
  z-index: 1;
  font-size: 0.9em;
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: 400;
  margin: 0.5em 0px 1.1em;
  padding: 0px;
}

.footer_elsewhere a {
  display: inline-flex;
  color: rgb(255, 255, 255);
}

.footer_legal img {
  height: 1.3em;
  align-self: center;
  display: inline-flex;
  position: relative;
  bottom: -0.3em;
}

.footer_legal {
  position: relative;
  z-index: 1;
  font-weight: 300;
  font-size: 0.7em;
  color: rgb(255, 255, 255);
  text-align: center;
}

.footer_legal a {
  color: rgb(255, 255, 255);
  display: inline-block;
  padding: 0px 0.6em 0px 0.5em;
  border-right: 1px solid rgb(255, 255, 255);
  line-height: 1;
  text-decoration: none;
}

.footer_legal a:last-child {
  border-right-width: medium;
  border-right-style: none;
  border-right-color: currentcolor;
  padding-right: 0px;
}

@media (min-width: 45em) {
  .footer {
    padding: calc(6em) 0px 2em;
  }

  .footer_by {
    font-size: 0.9em;
  }

  .footer_elsewhere {
    font-size: 0.9em;
  }

  .footer_legal {
    font-size: 0.85em;
  }
}

@media (min-width: 60em) {
  .footer {
    padding-top: calc(7.5em);
  }

  .footer_by {
    font-size: 1em;
  }

  .footer_legal {
    font-size: 0.85em;
  }
}

.contain {
  margin: 0px auto;
  position: relative;
}

.contain-common {
  padding: 0px 20px;
  color: rgb(0, 0, 0);
}

.contain-common a {
  color: rgb(0, 0, 0);
}

@media (min-width: 60em) {
  .contain {
    position: static;
  }

  .contain-common {
    position: relative;
    margin: 2em 6.25% 0px;
    max-width: 42em;
  }
}

.dialog-background-open {
  background-color: rgb(0, 0, 0);
  opacity: 0.6;
}

.dialog-content {
  margin: 0px;
  padding: 1em;
  max-width: 100%;
}

@media (min-width: 30em) {
  .dialog-content {
    width: auto;
  }
}

@media (min-width: 32em) {
  .dialog-content {
    margin: 0px;
  }
}

.dialog-close {
  display: block;
  position: absolute;
  text-indent: -9999px;
  overflow: hidden;
  top: 25px;
  right: 25px;
  width: 41px;
  height: 41px;
  background: url("/img/vector/close.png") 50% 50% no-repeat;
  opacity: 0.8;
}

.dialog-close {
  background-image: url("/img/vector/close.svg");
}

.dialog.dialog-open {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-name: dialog-anim-open;
}

.dialog.dialog-closed {
  display: block;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-name: dialog-anim-close;
}

@-webkit-keyframes dialog-anim-open {
  0% {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 1);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes dialog-anim-open {
  0% {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 1);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes dialog-anim-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale3d(0.9, 0.9, 1);
  }
}

@keyframes dialog-anim-close {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale3d(0.9, 0.9, 1);
  }
}

@media (min-width: 80em) {

  .mast_content,
  .current,
  .locals,
  .cams,
  .sponsors,
  .contain-common {
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
  }

  .forecast {
    margin-top: 0.75em;
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
  }
}

@media (min-width: 90em) {

  .mast_content,
  .current,
  .locals,
  .cams,
  .sponsors,
  .contain-common {
    margin-left: auto;
    margin-right: auto;
    max-width: 52em;
  }

  .forecast {
    margin-left: auto;
    margin-right: auto;
    max-width: 52em;
  }
}

.report {
  margin-top: 1em;
}

.report .vertical_hed {
  margin: 0px;
}

.report_label,
.report_comments {
  display: block;
}

.report_label {
  margin: 0.8em 0px 0.3em;
  font-size: 0.8em;
}

.report_label i {
  color: rgb(255, 255, 255);
  font-size: 0.9em;
  font-style: italic;
}

.report_comments {
  appearance: none;
  margin: 0.4em 0px 0.9em;
  font-size: 1em;
  box-sizing: border-box;
  height: 4.8em;
  border-radius: 0.5em;
  background: rgb(0, 0, 0);
  padding: 0.7em;
  border: 1px solid rgb(255, 255, 255);
  font-weight: 400;
  display: block;
  width: 100%;
}

.report_upload {
  appearance: none;
  border: 1px solid rgb(255, 255, 255);
  font-size: 0.8em;
  font-family: sans-serif;
  display: block;
  margin: 0.4em 0px;
  background: rgb(0, 0, 0);
  padding: 0.8em;
  max-width: 90%;
}

.report_upload {
  font-family: vic, sans-serif;
}

.report_submit {
  appearance: none;
  font-size: 0.8em;
  padding: 0.7em 1em;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-weight: 700;
  border-radius: 0.8em;
  margin: 1em 0px 2em auto;
  display: block;
  width: fit-content;
  cursor: pointer;
  border: 2px solid rgb(255, 255, 255);
}

@media (min-width: 35em) {
  .report {
    margin: 3em auto 4em;
    max-width: 35em;
  }

  .report_label,
  .report_comments,
  .report_submit {
    font-size: 1em;
  }

  .report_label {
    margin-top: 1.5em;
  }

  .report_comments {
    height: 8em;
  }
}
.footer_by span  {
  display: inline-block;
  border-right: 1px solid #fff;
  padding-right: 0.5em;
  margin-right: 0.5em;
  line-height: 1;
}

@media (max-width: 40em) {
  .footer_by span {
    display: block;
    border: 0;
    padding-bottom: .5em
  }
}