.vjs-theme-custom {
  --vjs-theme-custom--secondary: #7ffff0;
  --vjs-theme-custom--secondary: var(--primary);
  --vjs-theme-custom--primary: #000;
  border-radius: 2rem;
  overflow: hidden;
  z-index: 10;
}
.vjs-theme-custom.vjs-big-play-button:focus,
.vjs-theme-custom:hover .vjs-big-play-button {
  background-color: transparent;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23c5e1a5'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
}
.vjs-theme-custom .vjs-big-play-button {
  width: 88px;
  height: 88px;
  background: none;
  background-repeat: no-repeat;
  background-position: 50%;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
  border: none;
  top: 50%;
  left: 50%;
  margin-top: -44px;
  margin-left: -44px;
  color: purple;
}
.vjs-theme-custom .vjs-big-play-button .vjs-icon-placeholder {
  display: none;
}
.vjs-theme-custom .vjs-button > .vjs-icon-placeholder:before {
  line-height: 1.55;
}
.vjs-theme-custom .vjs-control:not(.vjs-disabled):not(.vjs-time-control):hover {
  color: var(--vjs-theme-custom--primary);
  text-shadow: var(--vjs-theme-custom--secondary) 1px 0 10px;
}
.vjs-theme-custom .vjs-control-bar {
  background: none;
  margin-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
}
.vjs-theme-custom .vjs-play-control {
  font-size: 0.8em;
}
.vjs-theme-custom .vjs-play-control .vjs-icon-placeholder:before {
  background-color: var(--vjs-theme-custom--secondary);
  height: 1.5em;
  width: 1.5em;
  margin-top: 0.2em;
  border-radius: 1em;
  color: var(--vjs-theme-custom--primary);
}
.vjs-theme-custom .vjs-play-control:hover .vjs-icon-placeholder:before {
  background-color: var(--vjs-theme-custom--primary);
  color: var(--vjs-theme-custom--secondary);
}
.vjs-theme-custom .vjs-mute-control {
  display: none;
}
.vjs-theme-custom .vjs-volume-panel {
  margin-left: 0.5em;
  margin-right: 0.5em;
  padding-top: 0.3em;
}
.vjs-theme-custom .vjs-volume-bar.vjs-slider-horizontal,
.vjs-theme-custom .vjs-volume-panel,
.vjs-theme-custom
  .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.vjs-theme-custom .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-theme-custom
  .vjs-volume-panel:active
  .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-custom .vjs-volume-panel:hover,
.vjs-theme-custom
  .vjs-volume-panel:hover
  .vjs-volume-control.vjs-volume-horizontal {
  width: 3em;
}
.vjs-theme-custom .vjs-volume-level:before {
  font-size: 1em;
}
.vjs-theme-custom .vjs-volume-panel .vjs-volume-control {
  opacity: 1;
  width: 100%;
  height: 100%;
}
.vjs-theme-custom .vjs-volume-bar {
  background-color: transparent;
  margin: 0;
}
.vjs-theme-custom .vjs-slider-horizontal .vjs-volume-level {
  height: 100%;
}
.vjs-theme-custom .vjs-volume-bar.vjs-slider-horizontal {
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
}
.vjs-theme-custom .vjs-volume-bar:before {
  content: "";
  z-index: 0;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 3em solid transparent;
  border-bottom: 2em solid var(--vjs-theme-custom--primary);
  border-right: 0 solid transparent;
  border-top: 0 solid transparent;
}
.vjs-theme-custom .vjs-volume-level {
  overflow: hidden;
  background-color: transparent;
}
.vjs-theme-custom .vjs-volume-level:before {
  content: "";
  z-index: 1;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 3em solid transparent;
  border-bottom: 2em solid var(--vjs-theme-custom--secondary);
  border-right: 0 solid transparent;
  border-top: 0 solid transparent;
}
.vjs-theme-custom .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1em;
}
.vjs-theme-custom .vjs-play-progress:before {
  display: none;
}
.vjs-theme-custom .vjs-progress-holder {
  border-radius: 0.2em;
  height: 0.5em;
  margin: 0;
}
.vjs-theme-custom .vjs-load-progress,
.vjs-theme-custom .vjs-load-progress div,
.vjs-theme-custom .vjs-play-progress {
  border-radius: 0.2em;
}
.vjs-theme-custom .vjs-tech {
  /* border-radius: 2rem; */
  overflow: hidden;
}

.vjs-theme-custom {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
  border: var(--border-width) solid var(--border-color);
}

.vjs-theme-custom.vjs-big-play-button:focus, .vjs-theme-custom:hover .vjs-big-play-button {
  background-color: transparent;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23c5e1a5'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
}

.webcam {
  margin: 6rem auto;
}

.cam {
  margin: 0 -3% 8rem -3%;
  text-align: center;
  display: grid;
  padding-left: 3%;
  padding-right: 3%;
  /* background-color: var(--background-color); */
}

.cam-image {
  margin: 0;
  border: var(--border-width) solid var(--border-color);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: var(--shadow-hard);
}

.cam-image img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  position: absolute;
  inset: 0;
}

@media (max-width: 767px) and (min-height: 500px) {
  .cam {
    background: var(--background-color);
    padding-top: 3%;
    padding-bottom: 1.5%;
  }

  /* .webcam > .cam:last-of-type {
    position: sticky;
    top: 0;
    z-index: 10;
  } */
}

.cam > p {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}

.surf-forecast {
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
}

.surf-forecast .sc-widget-header,
.surf-forecast .sc-widget-body,
.surf-forecast .sc-widget-footer {
  background-color: transparent;
}

/* Button - social share */

.hidden {
  display: none !important;
}

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  max-width: 100%;
  margin: 0;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  z-index: 3;
  width: 100%;
  min-width: min(31rem, calc(100vw - 3rem));
  background: var(--card-background-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color);
}

.share-button__fallback button:hover {
  color: var(--accent);
}

.share-button__fallback button:hover svg {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  width: 100%;
  border: 1px solid var(--border-color);
  padding: 1rem 2rem;
  border-radius: 0;
  font-family: inherit;
  font-size: 1.33333rem;
  line-height: normal;
  background-color: var(--card-background-color);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

.share-button .field {
  width: 100%;
}

.share-button .field input {
  width: 100%;
  border: 1px solid var(--border-color);
  padding: 1rem 2rem;
  border-radius: 0;
  font-family: inherit;
  background: var(--card-background-color);
}

@keyframes stokeddddd {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.favorite-button {
  position: relative;
}

.favorite-button i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 3px;
  height: 8px;
  opacity: 0;
  animation: stokeddddd 1.5s ease-out forwards;
}