/* video css starts  */
.ytplayer-wrapper {
  position: relative;
  cursor: pointer;
  background: #000;
  font-size: 0
}

.ytplayer-wrapper::before {
  content: '';
  display: inline-block;
  padding-top: 56.25%
}

.ytplayer-wrapper .ytplayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1rem
}

.ytplayer-wrapper .ytplayer img {
  height: 100%;
  width: 100%
}

.icon--player {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  border: .5em solid #ffffff;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0.1em .1em .2em rgba(0, 0, 0, 0.33));
  transition: color .2s
}

.icon--player::after {
  content: '';
  display: block;
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 2em solid #ffffff;
  margin: 1em 1.3em
}

#yt_mobile_modal .ytplayer_mobile {
  max-height: calc(100vh - 5em)
}

#yt_mobile_modal .close:focus {
  outline-color: #fff;
  outline-offset: -2px
}

#yt_mobile_modal {
  opacity: 0;
  z-index: -1;
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  pointer-events: none;
  -webkit-transition: opacity .25s ease-in-out, z-index .25s ease-in-out;
  transition: opacity .25s ease-in-out, z-index .25s ease-in-out
}

#yt_mobile_modal.playing {
  z-index: 1001 !important;
  opacity: 1;
  pointer-events: all
}

#yt_mobile_modal::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle
}

#yt_mobile_modal .ytplayer_mobile {
  position: relative;
  display: inline-block;
  width: 99%;
  vertical-align: middle;
  max-width: 1024px;
  -webkit-transform: translate(0, 5em);
  transform: translate(0, 5em);
  -webkit-transition: -webkit-transform .15s ease-in-out;
  transition: transform .15s ease-in-out
}

#yt_mobile_modal.playing .ytplayer_mobile {
  -webkit-transform: none;
  transform: none
}

#yt_mobile_modal .ytplayer_mobile::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 54%
}

#yt_mobile_modal iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

#yt_mobile_modal.playing~.main_container,
#yt_mobile_modal.playing~.root,
#yt_mobile_modal.playing~main {
  visibility: hidden;
  transition: visibility .0000001s .5s
}

#yt_mobile_modal.playing~.skip-content-div {
  visibility: hidden;
  transition: visibility .0000001s .5s
}

.video-search-filters-row {
  display: flex;
  flex-wrap: wrap
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.video-list-item {
  flex-basis: 22em
}

.video-list-item .icon--player {
  font-size: .66em
}

.video-list-image {
  position: relative
}

@media(min-width:48em), print {
  .video-search-filter {
    flex-basis: 33%
  }
}

button.close {
  cursor: pointer;
  background: none 0px 0px repeat scroll rgba(0, 0, 0, 0);
  border-width: 0px;
  border-style: none;
  border-color: initial;
  border-image: initial;
  padding: 0px;
  right: 0px;
  width: 3em;
  height: 3em;
  position: absolute;
  top: -3em;
  color: #000000;
  text-shadow: rgb(255, 255, 255) 0px 1px 0px;
}

button.close::before,
button.close::after {
  content: '';
  display: block;
  height: .2em;
  position: absolute;
  width: 2em;
  left: .5em;
  top: 1.4em;
  background: #fff
}

button.close::before {
  transform: rotate(45deg)
}

button.close::after {
  transform: rotate(-45deg)
}
/* video css ends */