.video-link {
  --img-initial: url(../ee/0/img/svg.php?ion/caret-forward-circle&fill=dddddd00&stroke=fff&opacity=.5);
  --img-loading: url(../ee/0/img/svg.php?ee/loader-spin&stroke=fff&opacity=1);
  /*--img-loading: url(../ee/0/img/svg.php?ion/md-sync&color=fff&fill=fff&opacity=1);*/

  --img-play-cta: url(../ee/0/img/svg.php?ion/play-circle-sharp&fill=fff&stroke=fff&opacity=1);
  --img-seek-cta: url(../ee/0/img/svg.php?ion/play-sharp&fill=transparent&stroke=000&opacity=1);
  --img-pause-cta: url(../ee/0/img/svg.php?ion/pause-circle-outline&stroke=fff&opacity=1);
  --img-playing: url(../ee/0/img/svg.php?ion/play-sharp&fill=transparent&stroke=666&opacity=1);
  --img-focused: url(../ee/0/img/svg.php?ion/ios-play&fill=fff&stroke=fff&opacity=1);
}
.video-link.dark-btn {
  --img-initial: url(../ee/0/img/svg.php?ion/caret-forward-circle&fill=dddddd00&stroke=fff&opacity=.5);
  --img-loading: url(../ee/0/img/svg.php?ee/loader-spin&stroke=000&opacity=1);

  --img-play-cta: url(../ee/0/img/svg.php?ion/play-circle-sharp&fill=000&stroke=000&opacity=1);
  --img-seek-cta: url(../ee/0/img/svg.php?ion/play-sharp&fill=000&opacity=1);
  --img-pause-cta: url(../ee/0/img/svg.php?ion/pause-circle-outline&stroke=000&opacity=1);
  --img-playing: url(../ee/0/img/svg.php?ion/play-sharp&fill=999&opacity=1);
  --img-focused: url(../ee/0/img/svg.php?ion/ios-play&fill=000&stroke=000&opacity=1);
}

@keyframes translate {
  from {
    transform:translate(-100%, -50%);
  }
  to {
    transform:translate(0%, -50%);
  }
}
@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}


.link-description,
.link-title {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}
.link-description{
  font-size: .8em;
}


.video-link .link-icon {
  visibility: hidden;
  position: absolute;
  top: calc(50% - .5em);
}

.video-link>.link-icon {
  left: .1em;
  font-size: 1.8em;
}

.link-title>.link-icon {
  left: -1.1em;
}

.video-link{
  opacity: .5;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  border: 1px solid transparent;

  font-size: 1rem;
  line-height: 1.4em;
  
  margin: 2px auto;
  padding: 4px 1.2em 4px 2.2em;
  position: relative;
  cursor: default;
}
.video-link.initialized{
  opacity: .5;
}
.video-link.player-ready{
  opacity: 1;
}
.video-link.player-ready{
  cursor: pointer;
  border-radius: 4px;
  position: relative;
}
.video-link.focused{
  background-color: rgba(0,0,0,.05);
}

.video-link.player-ready .link-icon {
  visibility: visible;
}
.font-icon {
  margin: .1em .2em 0;
}

.video-link.loading,
.video-link.seeking{
  opacity: .8;
}
.video-link.seeking,
.video-link.loading,
.video-link.player-ready:hover {
  background-color: rgba(0,0,0,.1);
}
/*
.video-link.seeking:before,
.video-link.loading:before,
*/
.video-link.player-ready:before{
  content:'';
  width:20px;
  height:20px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  position: absolute;
  background: transparent center center no-repeat;
  background-size: contain;
  animation: spin linear 5000ms infinite;
}

.video-link.seeking:before,
.video-link.loading:before {
  background-image: var(--img-loading);
}

.video-link .img,
.video-link .img {
  border-radius: 0;
  opacity: .8;
}


/* 
--
-- videolink-tpl 
-- ---------------------------------------------------------------------------------------------------------------------
*/

.video-link.tpl-videolink.seeking:before,
.video-link.tpl-videolink.loading:before{
  content: none;
}

.video-link .tpl-img,
.video-title{
  overflow: visible;
}

.video-link .tpl-img{
  position:relative;
  padding:.5em;
  border-radius: 0;
}
.video-link.dark-bg .tpl-img {
  background: #000;
}
.video-link.light-bg .tpl-img {
  background: #fff;
}

.video-link .tpl-img:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  max-width: 100%;
  max-height: 100%;
  background: transparent center no-repeat;
  background-size: contain;
}

.video-link .tpl-img:after {
  background-image: var(--img-initial);
}
.video-link.initialized .tpl-img:after {
  background-image: var(--img-play-cta);
}
.video-link.seek-link.initialized .tpl-img:after {
  background-image: var(--img-seek-cta);
}

.video-link.seek-link.loading .tpl-img:after,
.video-link.seek-link.seeking .tpl-img:after,
.video-link.loading .tpl-img:after,
.video-link.seeking .tpl-img:after{
  background-image: var(--img-loading);
}

/*
.video-link.focused .tpl-img:after {
  background-image: var(--img-focused);
}
*/
.video-link.playing .tpl-img:after{
  background-image: var(--img-pause-cta);
}
.video-link.playing.seek-link .tpl-img:after{
  background-image: var(--img-playing);
}

.video-link .tpl-img:after {
  transform: translate(-50%,-50%) scale(1);
  transition: transform .15s ease-in-out, opacity .1s ease-in-out;
}
.video-link.focused.interacting .tpl-img:after{
  transform: translate(-50%,-50%) scale(1.4);
  transition: transform 500ms ease-in-out, opacity 50ms ease-in-out;
}
.video-link .tpl-img:after {
  opacity:1;
}
.video-link.focused.interacting .tpl-img:after{
  opacity:0.5;
}
.video-link.dark.focused.interacting .tpl-img:after{
  opacity:0.2;
}