.responsive_video {
  position: relative;
  padding-bottom: 54.25%;
  padding-top: 25px;
  height: 0;

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

.btn_video {
  cursor: pointer;
  outline: none !important;
  border: 0;
  background: transparent;
  color: #fff;
  width: 140px;
  padding: 0;
  font-weight: $fw-semi;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1.79px;
  line-height: 32px;

  &:hover {
    .btn_video__icon {
      @include scale(1.1);

      &:before,
      &:after {
        opacity: 0;
      }
    }
  }

  img {
    margin-left: 12px;
  }

  &__icon {
    display: block;
    margin-bottom: 23px;
    width: 58px;
    height: 58px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100px;
    position: relative;

    @include transition(all .3s ease);
    @include animation(none);

    &:before,
    &:after {
      content: '';
      border-radius: 100px;
      background-color: #fff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      transform-origin: center center;
      border: 1px solid rgba(#fff, 1);

      @include scale(0.5);
      @include animation(pulse-me 3s linear infinite);
    }

    &:after{
      animation-delay: 2s;
    }
  }
}

.landing--video {
  -webkit-background-image: linear-gradient(-179deg, #0DA7FC 0%, #0388EF 100%);
  background-image: linear-gradient(-179deg, #0DA7FC 0%, #0388EF 100%);
  position: relative;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:2;
    opacity: 0.9;

    -webkit-background-image: linear-gradient(-179deg, #0DA7FC 0%, #0388EF 100%);
    background-image: linear-gradient(-179deg, #0DA7FC 0%, #0388EF 100%);
    @include transition(opacity .3s ease);
  }

  .container {
    width: 1280px;
  }

  .btn_video {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: -55px auto;
    z-index: 10;
  }

  &.video_played {
    &:after {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .btn_video {
      opacity: 0;
      visibility: hidden;
    }
  }
}

.video {
  margin: 68px 0 20px;
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
  height: 0;

  iframe {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    //max-height: 745px;
  }

  &__container {
    margin-bottom: 28px;
  }

  &__title {
    font-family: $ff;
    font-weight: $fw-semi;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  &__desc {
    font-size: 17px;
    color: #3F4D60;
  }
}

@-webkit-keyframes pulse-me{
  0%{
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
  50%{
    opacity: 0.1;
  }
  70%{
    opacity: 0.09;
  }
  100%{
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse-me{
  0%{
    transform: scale(0.5);
    opacity: 0;
  }
  50%{
    opacity: 0.1;
  }
  70%{
    opacity: 0.09;
  }
  100%{
    transform: scale(2);
    opacity: 0;
  }
}