@import url("https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap;");
div.paragraph-video-button {
  position: relative;
  width: max-content;
  margin-top: 8px;
}
div.paragraph-video-button__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  cursor: pointer;
  z-index: 1;
}
div.paragraph-video-button__overlay:hover + .field--name-field-remote-video .field--name-field-media-oembed-video {
  background: #ffffff;
  color: #000000;
  border: none;
}
div.paragraph-video-button__overlay:hover + .field--name-field-remote-video .field--name-field-media-oembed-video:after {
  filter: invert(100%);
}
div.paragraph-video-button__overlay:hover + .field--name-field-remote-video .field--name-field-media-oembed-video:before {
  background: #000000;
}
div.paragraph-video-button.background--video-button-black .field--name-field-media-oembed-video:before {
  background: #000000;
}
div.paragraph-video-button.background--video-button-black .field--name-field-media-oembed-video:after {
  filter: invert(100%);
}
div.paragraph-video-button.background--video-button-black .paragraph-video-button__overlay:hover + .field--name-field-remote-video .field--name-field-media-oembed-video:before {
  background: #ffffff;
}
div.paragraph-video-button.background--video-button-black .paragraph-video-button__overlay:hover + .field--name-field-remote-video .field--name-field-media-oembed-video:after {
  filter: invert(0);
}
div.paragraph-video-button.background--video-button-orange-medium .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-orange .field--name-field-media-oembed-video:before {
  background: #FEB178;
}
div.paragraph-video-button.background--video-button-red-medium .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-red .field--name-field-media-oembed-video:before {
  background: #FFA099;
}
div.paragraph-video-button.background--video-button-magenta .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-magenta-medium .field--name-field-media-oembed-video:before {
  background: #EB9ADE;
}
div.paragraph-video-button.background--video-button-pink .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-purple-medium .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-purple .field--name-field-media-oembed-video:before {
  background: #A778F2;
}
div.paragraph-video-button.background--video-button-blue-medium .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-aqua-medium .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-aqua .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-blue .field--name-field-media-oembed-video:before {
  background: #81DBF3;
}
div.paragraph-video-button.background--video-button-light-grey .field--name-field-media-oembed-video:before {
  background: #FCF8F8;
}
div.paragraph-video-button.background--video-button-medium-grey .field--name-field-media-oembed-video:before {
  background: #D5D5D5;
}
div.paragraph-video-button.background--video-button-dark-grey .field--name-field-media-oembed-video:before {
  background: #666666;
}
div.paragraph-video-button.background--video-button-default .field--name-field-media-oembed-video:before, div.paragraph-video-button.background--video-button-night-blue .field--name-field-media-oembed-video:before {
  background: #000000;
}
div.paragraph-video-button.background--video-button-default .field--name-field-media-oembed-video:after, div.paragraph-video-button.background--video-button-night-blue .field--name-field-media-oembed-video:after {
  filter: invert(100%);
}
div.paragraph-video-button.background--video-button-night-blue .field--name-field-media-oembed-video:before {
  background: #101B5D;
}
div.paragraph-video-button .field--name-field-media-oembed-video {
  font-size: 17px;
  font-weight: 700;
  line-height: 120%;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  background: #ffffff;
  color: #000000;
  border-radius: 10px;
  transition: 0.5s;
  padding: 15px 25px;
  text-decoration: unset;
  display: flex;
  width: 222px;
  justify-content: space-between;
  align-items: center;
  width: 350px;
  border: 1px solid #ffffff;
  position: relative;
  margin-top: 0;
  padding-right: 90px;
  display: flex;
  justify-content: flex-start;
  column-gap: 5px;
  border: none;
  font-weight: 700;
}
@media (max-width: 768px) {
  div.paragraph-video-button .field--name-field-media-oembed-video {
    font-size: 16px;
  }
}
div.paragraph-video-button .field--name-field-media-oembed-video:after {
  content: url("../../images/icons/play--black.svg");
  display: inline-block;
  transition: 0.5s;
  height: 20px;
}
div.paragraph-video-button .field--name-field-media-oembed-video.hovered:after, div.paragraph-video-button .field--name-field-media-oembed-video:hover:after {
  content: url("../../images/icons/play--black.svg");
  content: url("../../images/icons/play--white.svg");
}
div.paragraph-video-button .field--name-field-media-oembed-video.hovered, div.paragraph-video-button .field--name-field-media-oembed-video:hover {
  background: #000000;
  color: #ffffff;
}
div.paragraph-video-button .field--name-field-media-oembed-video:hover {
  border: 1px solid #000000;
}
div.paragraph-video-button .field--name-field-media-oembed-video span {
  color: #666666;
  font-weight: 300;
  margin-bottom: auto;
}
div.paragraph-video-button .field--name-field-media-oembed-video:before, div.paragraph-video-button .field--name-field-media-oembed-video:after {
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  position: absolute;
  height: 100%;
  width: 50px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  transition: 0.5s;
  display: flex;
}
div.paragraph-video-button .field--name-field-media-oembed-video:before {
  content: "";
}
div.paragraph-video-button .field--name-field-image {
  position: absolute;
  bottom: 0;
  right: 25px;
}
div.paragraph-video-button .field--name-field-image img {
  max-height: 48px;
  width: auto;
  cursor: pointer;
}
@media (max-width: 890px) {
  div.paragraph-video-button .field--name-field-media-oembed-video {
    width: 100%;
  }
}
@media (max-width: 768px) {
  div.paragraph-video-button .field--name-field-image img {
    float: right;
  }
}
@media (max-width: 470px) {
  div.paragraph-video-button {
    width: 100%;
  }
}
/*# sourceMappingURL=video-button.css.map */