.component-video {
  align-items: center;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
  position: relative; }
  .component-video .component-inner {
    width: 100%; }
  @media (min-width: 768px) {
    .component-video .video-wrapper {
      padding-left: 1.5vw;
      padding-right: 1.5vw; } }
  .component-video .video-wrapper-inner {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; }
  .component-video .overlay-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    width: 100%;
    z-index: 9; }
  .component-video .video-button {
    border: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: 0 auto;
    padding: 0;
    width: 100%; }
    .component-video .video-button:focus {
      outline: 0; }
  .component-video .thumbnail-image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%; }
  .component-video .video-play-button {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    pointer-events: none;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0; }
    @media (min-width: 768px) {
      .component-video .video-play-button {
        width: 85px;
        height: 85px; } }
    .component-video .video-play-button svg {
      width: 42px;
      height: 42px;
      display: block; }
      @media (min-width: 768px) {
        .component-video .video-play-button svg {
          width: 85px;
          height: 85px; } }
  .component-video .video-button.active .video-play-button {
    transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 1; }
  .component-video .embedded-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    width: 100%; }
  .component-video .overlay-wrapper-hidden + .embedded-video {
    opacity: 1; }
  .component-video .overlay-wrapper-hidden {
    pointer-events: none;
    visibility: hidden; }
  .component-video .component-overline {
    margin-bottom: 10px; }
  .component-video .video-content {
    margin-top: 15px; }
    @media (min-width: 768px) {
      .component-video .video-content {
        padding-left: 1.5vw;
        padding-right: 1.5vw; } }
    @media (min-width: 768px) {
      .component-video .video-content {
        margin-top: 0; } }
  .component-video .video-title {
    margin-bottom: 15px; }
  .component-video .video-description {
    letter-spacing: -.025em;
    font-size: 17px;
    color: #767676; }
    @media screen and (min-width: 100px) {
      .component-video .video-description {
        font-size: calc(17px + 4 * ((100vw - 100px) / 1900)); } }
    @media screen and (min-width: 2000px) {
      .component-video .video-description {
        font-size: 21px; } }
    .component-video .video-description p:last-child {
      margin-bottom: 0; }

@media (min-width: 768px) {
  .component-video--center .video-wrapper {
    margin: 0 auto;
    width: 83.33333%; } }

@media (min-width: 1200px) {
  .component-video--center .video-wrapper {
    width: 66.66667%; } }

.component-video--center .video-content {
  margin-top: 15px; }
  @media (min-width: 768px) {
    .component-video--center .video-content {
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;
      width: 66.66667%;
      text-align: center; } }
  @media (min-width: 1200px) {
    .component-video--center .video-content {
      width: 50%; } }

@media (min-width: 768px) {
  .component-video--right .component-inner,
  .component-video--left .component-inner {
    align-items: flex-end;
    display: flex; } }

@media (min-width: 768px) {
  .component-video--right .video-wrapper,
  .component-video--left .video-wrapper {
    width: 66.66667%; } }

@media (min-width: 768px) {
  .component-video--right .video-content,
  .component-video--left .video-content {
    width: 33.33333%; } }

.component-video--right .video-wrapper {
  order: 1; }
  @media (min-width: 768px) {
    .component-video--right .video-wrapper {
      order: 2; } }

.component-video--right .video-content {
  order: 2; }
  @media (min-width: 768px) {
    .component-video--right .video-content {
      order: 1; } }

.component-video {
  position: relative; }
  .component-video .video-title {
    font-size: 30px;
    display: block;
    font-family: "america-comp", sans-serif;
    font-style: normal;
    line-height: .95;
    text-transform: uppercase; }
    @media screen and (min-width: 100px) {
      .component-video .video-title {
        font-size: calc(30px + 36 * ((100vw - 100px) / 1900)); } }
    @media screen and (min-width: 2000px) {
      .component-video .video-title {
        font-size: 66px; } }
  .component-video .overlay-wrapper circle {
    transition: fill 450ms cubic-bezier(0.215, 0.61, 0.355, 1); }
  .component-video .overlay-wrapper:hover circle {
    fill: #159CE0; }
  .component-video .overlay-wrapper path {
    transition: fill 450ms cubic-bezier(0.215, 0.61, 0.355, 1); }
  .component-video .overlay-wrapper:hover path {
    fill: #ffffff; }

@media (min-width: 768px) {
  .component-video--left .video-content {
    padding-top: 35px; } }

@media (min-width: 768px) {
  .component-video--left .component-overline {
    top: 0;
    left: calc(66.66667% + 1.5vw); } }

@media (min-width: 768px) {
  .component-video--right .video-content {
    padding-top: 35px; } }

@media (min-width: 768px) {
  .component-video--right .component-overline {
    top: 0;
    left: 3vw; } }

/* - - option for Guildhall games landing page - - */
.component-video .video-wrapper-inner:has(.guildhall-game) {
  height: 360px; }
  .component-video .video-wrapper-inner:has(.guildhall-game) .guildhall-game {
    height: 360px;
    width: auto; }
    @media screen and (min-width: 768px) {
      .component-video .video-wrapper-inner:has(.guildhall-game) .guildhall-game {
        float: right; } }

/* - - options for light text color - - */
.component-video.text-light .component-overline, .component-video.text-light .video-title, .component-video.text-light .video-description, .component-video.text-light .video-description p {
  color: white; }

/* - - update for keyboard accessibility - - */
.component-video .video-button:focus-visible .video-play-button {
  outline: 2px solid blue;
  background-color: yellow; }
  .component-video .video-button:focus-visible .video-play-button circle {
    fill: #159CE0; }
  .component-video .video-button:focus-visible .video-play-button path {
    transition: fill 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
    fill: #fff; }

/* - - ensure overline size is correct - - */
.component-video .component-overline {
  font-size: calc(12px + (14 - 12)*(100vw - 100px)/(2000 - 100)); }

/* - - cornerstone 1.0 pages - - */
#container .component-video {
  margin: 2rem 0; }

#container .component-video .video-title {
  font-size: 2rem;
  text-transform: none; }

@media screen and (min-width: 1200px) {
  #smu-main .page-with-sidebar .col-xl-6.col-md-8.component-text .component-video--center .video-wrapper {
    width: 100%;
    padding: 0; } }

#smu-main .component-video:has(h1.video-title) .component-overline {
  display: none; }

@media screen and (min-width: 1200px) {
  #smu-main .component-video:has(h1.video-title) h1.video-title {
    font-size: calc(36px + 48*((100vw - 100px)/1900));
    margin-top: 15px; } }

#smu-main .component-video:has(h1.video-title).text-dark .video-description {
  color: #333; }

@media screen and (min-width: 1200px) {
  #smu-main .component-video:has(h1.video-title).component-video--right .video-content, #smu-main .component-video:has(h1.video-title).component-video--left .video-content {
    padding-top: 0; } }

@media screen and (min-width: 768px) {
  #smu-main .component-video:has(h1.video-title).component-video--right .video-content, #smu-main .component-video:has(h1.video-title).component-video--left .video-content {
    width: 40%;
    align-self: center;
    display: flex;
    flex-direction: column; } }

@media screen and (max-width: 767.98px) {
  #smu-main .component-video:has(h1.video-title).component-video--right .component-inner, #smu-main .component-video:has(h1.video-title).component-video--left .component-inner {
    display: flex;
    flex-direction: column; }
  #smu-main .component-video:has(h1.video-title).component-video--right .video-wrapper, #smu-main .component-video:has(h1.video-title).component-video--left .video-wrapper {
    order: 2;
    padding-top: 20px; }
  #smu-main .component-video:has(h1.video-title).component-video--right .video-content, #smu-main .component-video:has(h1.video-title).component-video--left .video-content {
    order: 1; } }