/*
 * The event video section.
 *
 * 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.
 */

.event-video {
  padding:156px calc(var(--grid-column-width)*2) 156px;
  width:100%;
}

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

  .event-video {
    padding:104px calc(var(--grid-column-width)*2) 40px;
  }
}

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

  .event-video {
    padding:180px calc(var(--grid-column-width)*1) 180px;
  }
}

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

  .event-video {
    padding:120px calc(var(--offset-x)*1) 120px;
  }
}

.event-video__container {
  height:864px;
  position:relative;
  width:100%;
}

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

  .event-video__container {
    height:576px;
  }
}

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

  .event-video__container {
    height:360px;
  }
}

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

  .event-video__container {
    height:184px;
  }
}

.event__video-preview {
  height:100%;
  object-fit:cover;
  width:100%;
}

.event__video-play {
  color:#fff;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  transition:color .6s cubic-bezier(.25,.25,0,1);
  z-index:4;
}

.event__video-play svg {
  --size:142px;
  height:var(--size);
  width:var(--size);
}

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

  .event__video-play svg {
    --size:102px;
  }
}

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

  .event__video-play svg {
    --size:64px;
  }
}

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

  .event__video-play:not(:disabled):hover {
    color:#181818;
  }
}

.event__video-play-time {
  position:absolute;
  right:14px;
  top:8px;
  z-index:1;
}

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

  .event__video-play-time {
    font-size:10px;
    right:8px;
    top:2px;
  }
}

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

  .event__video-play-time {
    right:-10px;
    top:-8px;
  }
}