*{
  margin: 0;
  padding: 0;
}
body {
  background: #000;
}
.heading {
  height: 700px;
  margin: 0;
  padding: 0px 0 0;
  width: 100%;
  max-height: 700px;
  position: relative;
  background-image: url(/longforms/longform-tv/img/dinding-3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.heading-left {

}

.heading-right {

}
.headingTitle {
  position: absolute;
  width: 40%;
  right: 0;
  top: 30%;
  text-align: right;
  color: #fff;
  padding: 40px;
}
.title h1 {
  padding-top: 140px;
  font-weight: normal;
  font-size: 60px;
  margin-bottom: 40px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.subtitle {
  font-size: 21px;
  text-align: left;
  margin-top: 42px;
}
.bodyTV {
  width: 600px;
  height: 400px;
  margin: 0px auto;
  position: absolute;
  bottom: 0;
  left: 140px;
}
.bodyTV:after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-image: url(/longforms/longform-tv/img/tv-1.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.stretch, .glitch:after, .glitch:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.glitchBody {
  width: 580px;
  height: 360px;
  margin: 0px auto;
  overflow: hidden;
  position: relative;
  top: 10px;
}
.glitch {
  -moz-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
  -webkit-animation: glitch 100ms infinite;

  background: #000;
  background-size: 100% auto;
  background-image: url(/longforms/longform-tv/img/glitch.jpg);
  width: 940px;
  height: 640px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  
  border: none;
  padding: 0px;
  color: #FAF15D;
  font-weight: bold;
  letter-spacing: 0.05em;
  outline: none;
  overflow: hidden;
  position: absolute;
  cursor: pointer;
  /*left: -20px;*/
  z-index: 99;
}
.glitch img{
  /*width: 100%;*/
  height: auto;
}
.glitch:after {
  background: #fff;
  content: "";
  height: 5px;
  -webkit-animation: scan 4s infinite;
  opacity: 1;
}
.glitch:before {
  content: "";
  opacity: 1;
}

@-webkit-keyframes glitch {
  0% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    background-position: left 0;
  }
  5% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
    opacity: 0.75;
  }
  10% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  15% {
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 0.75;
  }
  20% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  45% {
    -moz-transform: skewX(3deg);
    -ms-transform: skewX(3deg);
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg);
    opacity: 0.75;
  }
  50% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
    background-position: left 100%;
  }
  55% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 0.75;
  }
  60% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  75% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
  }
  80% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  85% {
    -moz-transform: skewX(-8deg);
    -ms-transform: skewX(-8deg);
    -webkit-transform: skewX(-8deg);
    transform: skewX(-8deg);
    opacity: 0.75;
  }
  90% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    background-position: left 20%;
  }
}
@-webkit-keyframes scan {
  0% {
    top: 0%;
  }
  50% {
    top: 97%;
  }
  100% {
    top: 0%;
  }
}

@media (max-width: 1024px) {
.bodyTV {
    width: 480px;
    height: 323px;
    margin: 0px auto;
    bottom: 100px;
    left: 85px;
  }
  .glitchBody {
    width: 480px;
    height: 323px;
  }
  .glitch {
    width: 480px;
    height: 280px;

  }
  .headingTitle {
    top: 10%;
    padding-top: 50px;
  }

  .title h1 {
    font-weight: normal;
    font-size: 46px;
    margin-bottom: 40px;
    padding-top: 160px;
    text-align: center;

  }

  .subtitle {
    font-size: 20px;
    text-align: left;
    margin-top: 155px;
  }

}

@media (max-width: 768px) {
  .bodyTV {
    width: 600px;
    height: 402px;
    margin: 0px auto;
    bottom: 0px;
    left: 90px;
  }
  .glitchBody {
    width: 600px;
    height: 360px;
  }
  .glitch {
    width: 640px;
    height: 440px;

  }
  .headingTitle {
    top: 10%;
  }
}

@media (max-width: 425px) {
  .heading {
    height: 800px;
  }
  .bodyTV {
    width: 385px;
    height: 260px;
    margin: 0px auto;
    bottom: 0px;
    left: 20px;
  }
  .glitchBody {
    top: 0px;
    width: 385px;
    height: 240px;
  }
  .glitch {
    width: 385px;
    height: 225px;

  }
  .headingTitle {
    text-align: center;
    width: 100%;
  }
  .title h1 {
    font-weight: normal;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
  .subtitle {
    padding-top: 0px;
    font-size: 20px;
    text-align: center;
    width: 100%;

  }
  .mobile-br {
    display: block;
  }
}

@media (max-width: 375px) {
  .heading {
    height: 758px;
    max-height: 800px;
  }
  .bodyTV {
    width: 355px;
    height: 240px;
    margin: 0px auto;
    bottom: 0px;
    left: 10px;
  }
  .glitchBody {
    top: 0px;
    width: 355px;
    height: 220px;
  }
  .glitch {
    width: 355px;
    height: 220px;

  }
  .headingTitle {
    text-align: center;
    width: 100%;
  }
  .title h1 {
    font-weight: normal;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
  .subtitle {
    padding-top: 0px;
    font-size: 20px;
    text-align: center;
    width: 100%;

  }
  .mobile-br {
    display: block;
  }
}

@media (max-width: 320px) {
  .heading {
    height: 800px;
    max-height: 835px;
  }
  .bodyTV {
    width: 302px;
    height: 205px;
    margin: 0px auto;
    bottom: 0px;
    left: 10px;
  }
  .glitchBody {
    top: 0px;
    width: 302px;
    height: 180px;
    margin:0;
  }
  .glitch {
    width: 302px;
    height: 180px;

  }
  .headingTitle {
    text-align: center;
    width: 100%;
  }
  .title h1 {
    font-weight: normal;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
  .subtitle {
    padding-top: 0px;
    font-size: 20px;
    text-align: center;
    width: 100%;

  }
  .mobile-br {
    display: block;
  }
}