/* Video List component styles: This may be included into Drupal-driven pages as custom features and into static HTML homepage or model landing pages. */

.videolist {
  padding: 112px 0px 112px 20px;
  position: relative;
}
.videolist-padtop {
  padding-top: 180px;
}
@media (max-width: 1039px) {
  .videolist,
  .videolist-padtop {
    padding: 50px 20px;
  }
}
.videolist-list {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
  transition: all 0.25s;
}
@media (min-width: 1040px) {
  .videolist-list {
    max-width: 1386px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.videolist-item {
  margin: 0;
}
@media (min-width: 1040px) {
  .videolist-item {
    width: 32%;
  }
}
.videolist-item + .videolist-item {
  padding-top: 20px;
}
@media (min-width: 1040px) {
  .videolist-item + .videolist-item {
    padding-top: 14px;
    border-top: 1px solid #D8D8D8;
  }
}
.videolist-player {
  height: 0;
  padding-bottom: 55.625%; /* 800:445 */
  position: relative;
  background: #F4F4F4 url('../images/loading.gif') no-repeat 50% 50%;

  /*background-size: cover;*/ /*restore this and remove loading.gif if we want to add cover background photos in future */
}
@media (min-width: 1040px) {
  .videolist-player-wrap {
    position: absolute;
    width: 63%;
    top: 0;
    right: 0;
    display: none;
  }
  .videolist-item_on .videolist-player-wrap {
    display: block;
  }
}
.videolist-player iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 0;
}
.videolist-detail {
  padding: 0 0 20px 68px;
  font-family: Arimo-Regular !important;
}
@media (max-width: 1039px) {
  .videolist-detail {
    padding-top: 10px;
  }
}
.videolist-detail a {
  display: block;
  color: #221E22 !important;
  font-family: Arimo-Bold;
  font-weight: 900;
  font-size: 27px;
  line-height: 34px;
  text-decoration: none;
  margin: 14px 0 15px 0;
  position: relative;
  transition: color 0.25s;
}
.videolist-detail a:before {
  content: "";
  position: absolute;
  display: block;
  width: 38px;
  height: 38px;
  background: transparent url('../images/icon_play.svg') no-repeat 50% 50%;
  top: -3px;
  left: -68px; /* same as left padding on .videolist-detail */
  transition: transform 0.21s ease-in-out;
}
/* disabled. looks odd.
.videolist-item_on .videolist-detail a:before {
  background-image: url('../images/icon_pause.svg');
} */
.videolist-detail a:hover {
  color: #221E22;
}
.videolist-detail a:hover:before {
  transform: translate(12px, 0);
}
.videolist-item_on .videolist-detail a:hover:before {
  transform: translate(0, 0);
}
.videolist-item_on .videolist-detail a,
.videolist-item_on .videolist-detail a:hover {
  color: #0499FF !important;
}
.videolist-detail p {
  color: #707070;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  margin: 0;

  transition-property: all;
  transition-duration: .27s;
  /* transition-timing-function: cubic-bezier(0, 1, 0.5, 1); */
}
@media (min-width: 1040px) {
  .videolist-detail p {
    overflow-y: hidden;
    max-height: 0;
  }
  .videolist-item_on .videolist-detail p {
    max-height: 170px; /* estimated max height that this text can ever wrap to, text should be kept short by content editors */
  }
}
.videolist-detail .popup-wrap sup {
  cursor: default;
}
.videolist-detail .popup-wrap sup.opens {
  cursor: pointer;
}