@import 'fonts.css';
@import 'images.css';
@import 'animations.css';
@import 'slider.css';

.visually-hidden {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  opacity: 0;
  z-index: -10000;
  font-size: 1px;
  color: transparent;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  background-repeat: no-repeat;
  background-size: contain;
}

body {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr auto;
  font-family: 'UniversLTPro-55Roman', serif;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.8rem;
  color: #232323;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  text-size-adjust: 100%;
}


html body:not(.not-loaded)::before {
  animation-name: fadeout;
  animation-duration: 0.5s;
  animation-iteration-count: 3;
}
html body.not-loaded::before {
  content: "Please wait / Veuillez patienter";
  text-align: center;
  display: block;
  box-sizing: border-box;

  height: 100vh;
  padding-top: calc(72vh - 0.45rem);
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('../images/OCMS-Title-circle.png');
  background-position-x:  center;
	background-position-y: calc(28vh - 1.35rem);
  background-repeat: no-repeat;
  background-size: 44vh 44vh;
}
html body.not-loaded > * {
  display: none;
}

body[lang='en'] *[lang='fr'] {
  display: none;
}

body[lang='fr'] *[lang='en'] {
  display: none;
}

body ul, body menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, h7 {
  font-family: 'utopia-std-subhead', sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0.9rem;
}

h2 {
  font-size: 1.7411rem;
  line-height: 2.7rem;
}

h3 {
  font-size: 1.5157rem;
  line-height: 2.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

h3>span {
  display: block;
  white-space: nowrap;
}

h3>.location {
  font-style: oblique;
  font-size: 1.3195rem;
  line-height: 1.8rem;
}

body.view-cards .lightbox {
  display: none;
}

body.play-video .stories-section, body.play-video .exhibit-description, body.play-video>header, body.play-video>footer {
  display: none;
}

body>header {

  /*
  background-color: #242224;
  color: #FFFFFF;*/
  display: grid;
  grid-template-columns: 2.7rem 1fr auto 2.7rem;
  grid-template-rows: auto;
  margin-bottom: 0.0rem;
  background-image: url('../images/icons/cmhr-logo.svg');
  background-repeat: no-repeat;
  background-position: 2.7rem center;
  background-size: 2.1825rem 2.8125rem;
}

body>header h1 {
  font-size: 2rem;
  line-height: 3.6rem;
  margin-top: 0;
  margin-bottom: 0;
  grid-column: 2;
  grid-row: 1;
  padding-left: 3.9825rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  background-repeat: no-repeat;
  background-position: 3.2rem center;
  background-size: auto 3rem;
}

body[lang='en']>header h1 {
  background-image: url('../images/OCMS-Title-EN.png');
}

body[lang='fr']>header h1 {
  background-image: url('../images/OCMS-Title-FR.png');
}

body>header h1 span {
  opacity: 0;
}

body>header nav {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  display: flex;
  align-items: center;
}

body>header nav a, body>header nav a:visited, body>header nav a:active, body>header nav a:link, body .exhibit-description a, body .exhibit-description a:visited, body .exhibit-description a:active, body .exhibit-description a:link {
  font-weight: normal;
}

body *:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-offset: 0.45rem;
}

body>header *:focus, body .exhibit-description *:focus {
  outline-color: #353535;
}

body .stories-section *:focus {
  outline-color: #353535;
}

body .stories-section .directional-link:focus {
  outline-offset: -0.45rem;
}

body .page-links *:focus {
  outline-offset: 0rem;
}

body>footer {
  grid-row: 3;
  /*   background-color: #242224;   color: rgba(255, 255, 255, .7);   padding-top: 0.45rem;*/
  color: #555555;
  padding-bottom: 0.45rem;
  text-align: left;
  vertical-align: middle;
  margin-top: 0.45rem;
  font-size: 0.8706rem;
  padding-left: 2.7rem;
}

body>footer p {
  margin-bottom: 0rem;
  margin-top: 0;
  vertical-align: middle;
  font-size: 0.8706rem;
}

body>main {
  display: grid;
  grid-template-rows: auto 1fr;
  padding-left: 0rem;
  padding-right: 0rem;
}

a, a:visited, a:link, a:active {
  color: #bb2533;
}

.curtain-intros .stories-section {
  display: none;
}

body>main>.exhibit-description {
  grid-row: 1;
  position: fixed;
  height: 100vh;
  width: 100%;
  background-color: #FFFFFF;
  opacity: 1;
  overflow: hidden;
  transition: height 0.2s, opacity 0.3s;
  z-index: 5555555555555;
  display: grid;
  grid-template-rows: 5.361325rem auto auto 1fr;
  grid-template-columns: 3.9825rem 1fr 0rem;
}


.exhibit-description p, .curtain-links {
  margin-right: 3.9825rem;
}
.exhibit-description p, .exhibit-description a {
  font-size: 1.1487rem;
}

.curtain-content {
  grid-row: 2;
  grid-column: 2;
}

.curtain-links {
  margin-top: 1.8rem;
  grid-column: 2;
  display: flex;
  justify-content: center;
  grid-row: 3;
}

body>main>.exhibit-description a {
  display: flex;
  justify-content: center;
  width: 6.3rem;
  text-align: center;
  text-decoration: none;
  flex-wrap: wrap;
}

body>main>.exhibit-description a>span {
  display: block;
  min-width: 5rem;
  text-align: center;
}

body>main>.exhibit-description a:after {
  content: "";
  display: block;
  width: 3.125rem;
  height: 3.125rem;
  padding: 0;
  border: #bb2533 2px solid;
  border-left: none;
  border-bottom: none;
  transform: translateY(-0.9rem) rotate(135deg);
  transition: transform 0.2s, border-color 0.1s;
}

body.no-intros>main>.exhibit-description {
  height: 0;
  opacity: 0;
  z-index: -555555555555;
  display: none;
}

body>main>.exhibit-description>* {
  margin-left: 2.7rem;
  margin-right: 2.7rem;
}

body>main>.exhibit-description h2 {
  margin-bottom: 1.8rem;
}

.stories-section {
  grid-row: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 2.7rem 1fr 2.7rem;
}

.stories-section>menu {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
  margin-top: 0.45rem;
  grid-row: 1;
  grid-column: 2;
}

.stories-section>menu .story-links-container {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
  margin-right: -0.45rem;
}

.stories-section>menu a {
  display: block;
  padding: 0.45rem;
}

.stories-section>menu>a {
  margin-right: 0.9rem;
  margin-left: -0.45rem;
}

.stories-section>menu .story-links-container a {
  margin-left: 0.9rem;
}

.stories-section>menu a.selected-link {
  color: #232323;
  font-weight: bold;
  text-decoration: none;
}

.stories-section>.stories-container {
  grid-row: 2;
  grid-column: 2;
  height: 100%;
}

.directional-link {
  display: block;
  box-sizing: border-box;
  grid-row: 2;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-width: 40px;
  background-color: #FFFFFF;
  position: relative;
}

.directional-link::before {
  content: "";
  display: block;
  border: #232323 2px solid;
  border-bottom: none;
  border-left: none;
  height: 0.9rem;
  width: 0.9rem;
  /*   min-height: 40px;   min-width: 40px;*/
  position: absolute;
  top: 50%;
}

.directional-link.next::before {
  transform: scaleY(1) translateY(-0.45rem) translateX(0.45rem) rotate(45deg);
}

.directional-link.prev::before {
  transform: scaleY(1) translateY(-0.45rem) translateX(0.9rem) rotate(-135deg);
}

.stories-section .prev {
  grid-column: 1;
}

.stories-section .next {
  grid-column: 3;
}

.stories-section footer {
  grid-row: 3;
  grid-column: 1 / span 3;
  text-align: center;
  vertical-align: middle;
}

.stories-section footer p {
  margin-top: 0.9rem;
  margin-bottom: 0;
}

.story-card {
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #000000;
  min-height: 9rem;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1.8rem 1fr auto 1.8rem;
}

@media (max-width: 55rem) {
  body .story-card.text-left, body .story-card.text-right {
    grid-template-columns: 1.8rem 1fr 1.8rem;
  }
}

.story-card:not(.current) {
  opacity: 0;
  transition: opacity 0.1s;
  display: none;
}

.story-card.current {
  opacity: 1;
  transition: opacity 0.3s, display 0s 0s;
}

a[data-video-id=""] {
  display: none;
}

a.button, a.button:visited, a.button:link, a.button:active {
  color: #232323;
  text-decoration: none;
}

a.button {
  font-weight: bold;
  padding: 0.9rem 1.8rem;
  min-width: 6.3rem;
}

a.button {
  background-color: #fabe36;
  transition: background-color 0.1s;
}

a.button:after {
  content: "";
  display: inline-block;
  height: 0.4375rem;
  width: 0.4375rem;
  border: #232323 2px solid;
  border-left: none;
  border-bottom: none;
  margin-left: 0.225rem;
}

a.button:after {
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.story-card.text-right {
  grid-template-columns: 40% 1fr 1.8rem;
  background-position: top left;
}

.story-card.text-left {
  grid-template-columns: 1.8rem 1fr 40%;
  background-position: top right;
}

.story-card-content {
  grid-row: 3;
  grid-column: 2;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #FFFFFF;
  padding: 1.8rem;
}

blockquote {
  font-size: 1.1487rem;
  line-height: 1.8rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  font-weight: bold;
  margin: 0;
  vertical-align: middle;
}



body[lang="en"] blockquote:before {
  content: open-quote;
}

body[lang="en"] blockquote:after {
  content: close-quote;
}

body[lang="fr"] blockquote:before {
  content: open-quote '\0000a0';
}

body[lang="fr"] blockquote:after {
  content: '\0000a0' close-quote;
}


.story-card .card-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 1.8rem;
}

.lightbox {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 1);
}

.player-container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 2.7rem;
  overflow: hidden;

}


/*This makes the player ONLY work for one size of ipad, but
the tradeoff is that we get HD video*/
.lightbox iframe {
/*  height: 100%;
  width: 100%;*/
  padding: 0;
  margin: 0;
  grid-column: 1;
  opacity: 0;
  transform: translateY(-50px) translateX(-128px) scale(0.8);
   /*pull iframe slightly up so that close captions are not overlapped by controls */
}

.lightbox.playing iframe {
  opacity: 1;
}

.play-video  .lightbox:not(.playing) .player-container::before {
  content: "";
  display: block;
  position: absolute;
  height: 16.5vh;
  width: 16.5vw;
  top: 41.75vh;
  left: 41.75vw;
  background-image: url('../images/icons/buffering.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  animation-name: spin;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}



.player-container.coming-up iframe {
  opacity: 1;
  display: none;
}



.video-main-button {
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  opacity: 0;
  grid-row: 2 / span 2;
  grid-column: 1;
}

.video-main-button>* {
  background-color: rgba(255, 255, 255, 0);
  padding: 1.8rem;
  width: 16.5vh;
  height: 16.5vh;
  display: block;
  margin: auto;
  background-position: center center;
  background-size: contain;
}

.lightbox .player-controls .video-main-button.button-play-pause>* {
  opacity: 0;
}

.button-play-pause>*>*, .player-controls-bottom .lightbox-close>* {
  color: rgba(0, 0, 0, 0);
  font-size: 0px;
}

.lightbox #btn-replay {
  display: none;
}

.coming-up .player-controls-bottom, .coming-up #button-play-pause-middle {
  display: none;
}

.coming-up #btn-replay {
  display: flex;
  opacity: 1;
  width: calc(25vw - 1.8rem);
  height: calc(33vh - 80px);
  margin-top: 33vh;
  margin-bottom: 33vh;
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}

.coming-up #btn-replay>* {
  background-color: transparent;
  background-size: contain;
  background-position: center center;
  height: 89%;
  width: 89%;
  background-image: url("../images/icons/replay.svg");
}

.coming-up #btn-replay>*>* {
  opacity: 0;
}

.upnext {
  margin-top: 80px;
}

.upnext {
  position: relative;
  width: 0vw;
  opacity: 0;
  height: calc(100vh - 80px);
  overflow: hidden;
  transition-property: width, padding, opacity;
  transition-duration: 0.2s, 0.2s, 0.3s;
  display: none;
}

.player-container.coming-up .upnext {
  display: grid;
  width: 75vw;
  opacity: 1;
}

.upnext menu {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.upnext button, .related-videos .story-info button {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  padding-right: 1.8rem;
  padding-left: 2.7rem;
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1.8rem;
  background-color: #000000;
  background-position: 0.45rem center;
  background-size: 1.8rem 1.8rem;
  background-repeat: no-repeat;
  border: none;
}

.upnext .btn-play-now, .related-videos .btn-play-now {
  background-image: url('../images/icons/play.svg');
}

.upnext #btn-pause-countdown {
  background-image: url('../images/icons/pause.svg');
}

.player-container.coming-up h2 {
  margin-left: 25vw;
}

body .player-container.coming-up a.lightbox-close {
	min-width: auto;
	padding-left: 1.8rem;
}

.player-container.coming-up .upnext .story-card-content {
  background-color: #e1e1e1;
  grid-row: 3 / span 2;
}

.prev-video-details {
  grid-column: 1;
  height: calc(33vh - 80px);
  margin-top: calc(33vh + 80px);
  margin-bottom: 33vh;
  margin-left: 0.9rem;
  margin-right: 0.9rem;
  width: auto;
  display: none;
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.coming-up .prev-video-details {
  display: block;
  opacity: 1;
  transition: opacity 0.2s;
}

.lightbox .coming-up .related-videos {
  display: none;
}

html body .simulate-full-screen {
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
}

.player-controls {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 80px 1fr 250px auto;
  grid-template-columns: 1fr;
  color: #FFFFFF;
}

.player-controls-top {
  grid-row: 1;
  grid-column: 1;
  background: #000000;
  display: flex;
  align-items: center;
}

.player-controls-bottom {
  grid-row: 4;
  grid-column: 1;
  display: flex;
  height: auto;
  width: 100vw;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 4.5rem 3.6rem 5.4rem 3.6rem 7.2rem 1fr 3.6rem 7.2rem 3.6rem 3.6rem 0.9rem;
  background-color: #000000;
}

body .lightbox .player-controls-bottom>* {
  border: #FFFFFF 1px solid;
  border-bottom: none;
  height: 3.6rem;
  width: 100%;
  box-sizing: border-box;
}

.player-controls-bottom button {
  color: #FFFFFF;
  background-color: #000000;
  border-radius: 0;
  width: auto;
  font-size: 1.1487rem;
}

.player-controls-bottom button[aria-selected=true] {
  background-color: #000000;
  color: #FFFFFF;
}

.player-controls-bottom .button-play-pause {
  grid-column: 4;
}

.player-controls-bottom a.lightbox-close {
  grid-column: 2;
  min-width: 0;
  background-position: center center;
  background-size: 2.25rem 2.25rem;
}

.player-controls-bottom input[type=range] {
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}

.related-videos h3 {
  margin-left: 2%;
  grid-row: 1;
}

.related-videos {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-rows: auto 1fr;
  background-color: #000000;
  grid-column: 1;
  grid-row: 3;
  z-index: 500000000000;
}

.related-videos ul {
  display: flex;
  grid-row: 2;
  justify-content: space-around;
  align-items: center;
  position: relative;
  height: 7.3rem;
}

.related-videos ul>* {
  height: 100%;
  padding-top: 1.8rem;
  width: 12vw;
}

.related-videos .story-info {
  display: none;
  position: absolute;
  bottom: 8.1rem;
  width: 66.6vw;
  left: 16.7vw;
  grid-template-rows: auto 1fr auto;
  background-color: #e1e1e1;
  color: #353535;
  padding: 1.9rem;
}

.related-videos li:first-child .story-info {
  left: 2vw;
}

.related-videos li:last-child .story-info {
  left: 26vw;
}

.related-videos .active-popup {
  background-image: url('../images/icons/current-indicator.svg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 1.8rem auto;
}

.related-videos .active-popup .story-info {
  display: grid;
}

.related-videos .story-info menu {
  display: flex;
  justify-content: flex-end;
}

.related-videos .playing-now  .related-video-btn-layout {
  border-color: #FFFFFF;
}

.related-videos .playing-now .btn-play-now {
  display: none;
}

body .story-info .lightbox-close {
  grid-row: 1;
  padding-right: 0;
  background-image: url('../images/icons/close-dark.svg');
  margin-right: 0;
}

.story-info .story-popup-content {
  grid-row: 2;
}

.story-info .story-popup-content h3, .story-info .story-popup-content h4 {
  padding-left: 0;
  margin-left: 0;
}

.story-info *:focus, .upnext *:focus {
  outline-color: #353535;
  outline-style: dashed;
  outline-width: 1px;
  outline-offset: 0.45rem;
}

.story-info *[disabled], .upnext *[disabled] {
  opacity: 0.3;
}

.story-info .lightbox-close span {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(0, 0, 0, 0);
  width: 0;
  height: 0;
  font-size: 0px;
  overflow: hidden;
  opacity: 0;
}

.story-info .lightbox-close::after, .story-info .lightbox-close::before {
  border-color: #353535;
}

.related-video-btn {
  height: 100%;
  width: 100%;
  background-color: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 1rem;
  padding: 0;
}

.related-video-btn .related-video-btn-layout {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 1fr auto;
  border: #000000 1px solid;
  box-sizing: border-box;
}

.related-video-btn .related-video-btn-name {
  grid-row: 2;
  display: block;
  text-align: center;
  width: 100%;
  padding-bottom: 0.45rem;
}

.player-controls-bottom .progress-display {
  width: 100%;
  grid-row: 1;
  grid-column: 6;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.progress-display input[type="range"] {
  width: 100%;
}

.player-controls-bottom p.current-time-display {
  grid-row: 1;
  grid-column: 5;
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
  margin-bottom: 0;
  vertical-align: middle;
}

p.current-time-display span {
  white-space: pre;
}

.player-controls-bottom *[aria-pressed=true] {
  background-color: #FFFFFF;
  color: #353535;
}

.video-main-button:focus>*, .related-video-btn:focus, .player-controls-bottom button:focus, .player-controls-top a:focus, .player-controls-bottom a:focus {
  outline-offset: 0.45rem;
  outline-color: #FFFFFF;
  outline-width: 1px;
  outline-style: dashed;
}

.video-setting-controls {
  grid-row: 3;
  grid-column: 4;
  justify-content: flex-end;
}

.player-controls>* {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 3s;
  transition-delay: 1s;
}

@media(hover) {
  .player-controls:hover>* {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0s;
  }

  .video-main-button:hover>* {
    outline-offset: 0.45rem;
    outline-color: #FFFFFF;
    outline-width: 1px;
    outline-style: dashed;
  }

  body a.lightbox-close:hover {
    color: #FFFFFF;
  }

  main a:hover {
    color: #bb2533;
  }

  .player-controls:hover::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20vw;
    height: 125px;
    background-color: #000000;
  }
}

body .lightbox:not(.paused) .related-videos {
  animation-name: fadeout;
  animation-duration: 0.5s;
  display: none;
}

.paused .player-controls>*, .player-controls:focus-within>*, .coming-up .player-controls .player-controls-top, .temp-controls .player-controls>* {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.1s;
  transition-delay: 0s;
}

.player-controls:focus-within::after, .temp-controls .player-controls::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20vw;
  height: 125px;
  background-color: black;
}

.button-play-pause {
  background-image: url('../images/icons/pause.svg');
}

.paused .button-play-pause {
  background-image: url('../images/icons/play.svg');
}

.lightbox .button-play-pause.video-main-button {
  background-image: none;
}

.button-play-pause .paused {
  display: none;
}

.paused .button-play-pause .paused {
  display: inline;
}

.paused .button-play-pause .playing {
  display: none;
}

.player-controls-top {
  justify-content: space-between;
}

.player-controls-top h2 {
  color: #FFFFFF;
  margin-left: 1.8rem;
}

.player-controls-top #audio-described-indicator>* {
  white-space: pre;
}

.player-controls-top h2>#audio-described-indicator, .player-controls-top h2>#you-were-watching {
  display: none;
}

.coming-up .player-controls-top h2>#you-were-watching {
  display: inline-block;
}

.coming-up .player-controls-top h2>#now-playing {
  display: none;
}

.audioDescribed .player-controls-top h2>#audio-described-indicator {
  display: inline-block;
}

body a.lightbox-close, body a.lightbox-close:visited, body a.lightbox-close:link, body a.lightbox-close:active {
  color: #FFFFFF;
}

body a.lightbox-close {
  display: flex;
  min-width: 150px;
  height: 2.7rem;
  color: #FFFFFF;
  padding-right: 2.7rem;
  justify-content: flex-end;
  background-image: url('../images/icons/close.svg');
  background-position: center right;
  background-size: 1.8rem 1.8rem;
  margin-right: 0.9rem;
  background-repeat: no-repeat;
  align-items: center;
  overflow: visible;
  position: relative;
}

.no-countdown .for-countdown {
  display: none;
}

.video-title span[lang] {
  white-space: pre;
}

#btn-cc {
  grid-row: 1;
  grid-column: 7;
  margin: 0;
  font-weight: bold;
  padding: 0;
}



/* .volume-control label {   display: inline-block;   background-image: url('../images/icons/volume.svg');   background-repeat: no-repeat;   background-size: contain;   height: 40px;   width: 40px; } .volume-control label * {   opacity: 0;   position: absolute;   top: 0;   left: 0;   overflow: hidden;   font-size: 0px;   height: 0;   width: 0; }*/