/*
 * The video popup component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.main-video__popup {
  background-color:#000;
  inset:0;
  opacity:0;
  pointer-events:none;
  position:fixed;
  transform:translateY(100%);
  transition:transform .3s ease-in-out,opacity .3s ease-in-out;
  z-index:50;
}

.main-video__popup.is-active {
  opacity:1;
  pointer-events:all;
  transform:translateY(0);
}

.js-video-popup__video {
  -webkit-touch-callout:none;
}

.video-popup__inner {
  background-color:#181818;
  height:100%;
  position:relative;
  width:100%;
}

.video-popup__video-container {
  align-items:center;
  display:flex;
  height:100%;
  justify-content:center;
  position:relative;
  width:100%;
}

.video-popup__video {
  aspect-ratio:1.7777777778;
  margin:auto 0;
  width:100%;
}

.video-popup__pause-overlay {
  color:#fff;
  left:50%;
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease;
}

.video-popup__pause-overlay.is-visible {
  opacity:1;
}

.video-popup__controls {
  align-items:center;
  bottom:0;
  color:#fff;
  display:flex;
  height:48px;
  justify-content:space-between;
  left:0;
  position:absolute;
  width:100%;
}

@media screen and (max-width:1440px) {

  .video-popup__controls {
    height:32px;
  }
}

.video-popup__progress {
  border-top:1px solid #fff;
  cursor:pointer;
  flex-grow:1;
  height:100%;
  position:relative;
}

.video-popup__progress-el {
  background-color:#fff;
  bottom:0;
  left:0;
  position:absolute;
  top:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .1s ease;
  width:100%;
}

.video-popup__hover-line {
  background-color:#fff;
  height:100%;
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:0;
  transition:opacity .15s ease;
  width:2px;
  z-index:2;
}

.video-popup__hover-line.is-visible {
  opacity:1;
}

.video-popup__hover-line.is-dark {
  background-color:#181818;
}

.video-popup__hover-time {
  color:#fff;
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  transition:opacity .15s ease;
  white-space:nowrap;
  z-index:2;
}

.video-popup__hover-time.is-visible {
  opacity:1;
}

.video-popup__hover-time.is-dark {
  color:#181818;
}

.video-popup__controls-btn {
  align-items:center;
  border-top:1px solid #fff;
  display:flex;
  height:100%;
  justify-content:center;
  transition:background-color .15s ease,border-color .15s ease;
  width:calc(var(--grid-column-width)*1.5 + var(--grid-gap)*.5);
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .video-popup__controls-btn {
    width:calc(var(--grid-column-width)*6 + var(--grid-gap)*5);
  }
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .video-popup__controls-btn:not(:disabled):hover {
    background-color:#181818;
    border-color:#181818;
  }
}

.video-popup__controls-btn:first-child {
  border-right:1px solid #fff;
}

.video-popup__controls-btn:last-child {
  border-left:1px solid #fff;
}

.video-popup__duration,
.video-popup__time {
  align-items:center;
  color:#fff;
  display:flex;
  height:100%;
  justify-content:center;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  transition:color .15s ease;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .video-popup__duration:not(:disabled):hover,
  .video-popup__time:not(:disabled):hover {
    opacity:0;
  }
}

.video-popup__duration.is-dark,
.video-popup__time.is-dark {
  color:#181818;
}

.video-popup__time {
  left:0;
  padding-left:20px;
}

.video-popup__duration {
  padding-right:20px;
  right:0;
}

.video-popup__close-btn {
  align-items:center;
  align-self:center;
  border:1px solid #fff6;
  color:#fff;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  left:50%;
  position:absolute;
  top:24px;
  transform:translateX(-50%);
  transition:background-color .15s ease;
  width:168px;
  z-index:2;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .video-popup__close-btn:not(:disabled):hover {
    background-color:#181818;
    border-color:#181818;
  }
}

@media screen and (max-width:1440px) {

  .video-popup__close-btn {
    height:32px;
    width:112px;
  }
}

@media screen and (max-width:1199px) {

  .video-popup__close-btn {
    width:64px;
  }
}

.video-popup__close-btn svg {
  --size:16px;
  height:var(--size);
  width:var(--size);
}

@media screen and (max-width:1440px) {

  .video-popup__close-btn svg {
    --size:10px;
  }
}

.main-about__heading-event-card {
  align-items:stretch;
  background-color:#e1251b;
  border-left:4px solid #fff;
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
  overflow:hidden;
  pointer-events:auto;
  position:relative;
  width:calc(var(--grid-column-width)*5.75 + var(--grid-gap)*4.75);
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .main-about__heading-event-card:not(:disabled):hover .main-about__heading-event-card-image {
    transform:scale(1.5);
  }
}