.video-production__wrapper {
  position: relative;
  padding-top: 56.25%;
  height: 0;
}


.video-production {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.video-control {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 20%;
  display: none;
}

.video-control__list {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 30px 0;
}

.video-control__list-item {
  list-style: none;
}

.video-control__button {
  border: none;
  background: transparent;
  outline: none;
}

.video-control__image {
  width: 100%;
  height: auto;  
}

.video-play {
  border: none;
  background: transparent;
  outline: none;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  margin-left: -25px;
  margin-top: -25px;
/*   transform: translate(-100%, -100%); */
}

.video-play__hide {
  display: none;
}

.video-play img {
  width: 50px;
  height: auto; 
  opacity: 0.5;
}

.video-back {
  border: none;
  background: transparent;
  outline: none;
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 0;
  display: none;
}

.video-back__hide {
  display: none;
}

.video-back__image {
  width: 100px;
  height: auto;  
}

@media (min-width: 992px) {

  .video-control {
    opacity: 0;
    display: block;
    transition: 0.7s opacity;
    pointer-events: none;
  }
  .video-control.video-control__intro {
    opacity: 1;
    pointer-events: all;
  } 

  .video-back {
    display: block;
  }


  .video-back__hide {
    display: none;
  }
}