.video-area video{
  max-width: 100%;
  height: 100%;
}
      .laptop {
          position: relative;
          width: 291px;
          height: 283px;
          margin: 0 auto;
      }

      .laptop .monitor {
          position: absolute;
          border: 5px solid #f9f9f9;
          border-radius: 2px;
          height: 150px;
          background: #ffffff;
          left: 14px;
          right: 14px;
          top: 36px;
          -webkit-transform: perspective(1000px) rotateX(15deg);
          -moz-transform: perspective(1000px) rotateX(15deg);
          transform: perspective(1000px) rotateX(15deg);
          -webkit-animation: open-laptop-monitor 2s;
          -moz-animation: open-laptop-monitor 2s;
          animation: open-laptop-monitor 2s;
      }

      .laptop .monitor .monitor-body {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: f9f9f9;
          background: #262626;
          -webkit-animation: start-monitor 1s 5s forwards;
          -o-animation: start-monitor 1s 5s forwards;
          animation: start-monitor 1s 5s forwards;
          display: flex;
          justify-content: center;
          align-items: center;
      }



      .laptop .bottom_part {
          position: absolute;
          border: 5px solid #f9f9f9;
          border-radius: 2px;
          height: 150px;
          background: #f9f9f9;
          left: 0px;
          right: 0px;
          bottom: 2px;
          -webkit-transform: perspective(1000px) rotateX(72deg);
          -moz-transform: perspective(1000px) rotateX(72deg);
          transform: perspective(1000px) rotateX(72deg);
          -webkit-animation: open-laptop-bottom-part 2s;
          -webkit-animation: open-laptop-bottom-part 2s;
          animation: open-laptop-bottom-part 2s;
      }

      .laptop .keyboard {
          padding: 7px;
          padding-bottom: 3px;
          background: #f9f9f9;
          margin-top: 5px;
          margin-left: 5px;
          margin-right: 5px;
      }
      .laptop .keyboard img {
          width: 100%;
      }

      .laptop .touchpad {
          background: #4d4d4d;
          width: 45px;
          padding: 10px;
          height: 17px;
          margin-top: 6px;
      }



      text {
          opacity: 0;
          -webkit-animation: ShowText 1s 2s forwards;
          -o-animation: ShowText 1s 2s forwards;
          animation: ShowText 1s 2s forwards;
      }





      @-webkit-keyframes open-laptop-monitor {
          0% {
              -webkit--transform: perspective(1000px) rotateX(-89deg);
              transform: perspective(1000px) rotateX(-89deg);
              left: 0px;
              right: 0px;
              top: 70px;
          }
          55% {
              top: 36px;
          }
          100% {
              -webkit-transform: perspective(1000px) rotateX(15deg);
              transform: perspective(1000px) rotateX(15deg);
              left: 14px;
              right: 14px;
          }
      }
      @-moz-keyframes open-laptop-monitor {
          0% {
              -moz-transform: perspective(1000px) rotateX(-89deg);
              transform: perspective(1000px) rotateX(-89deg);
              left: 0px;
              right: 0px;
              top: 70px;
          }
          55% {
              top: 36px;
          }
          100% {
              -moz-transform: perspective(1000px) rotateX(15deg);
              transform: perspective(1000px) rotateX(15deg);
              left: 14px;
              right: 14px;
          }
      }
      @keyframes open-laptop-monitor {
          0% {
              -webkit-transform: perspective(1000px) rotateX(-89deg);
              -moz-transform: perspective(1000px) rotateX(-89deg);
              transform: perspective(1000px) rotateX(-89deg);
              left: 0px;
              right: 0px;
              top: 70px;
          }
          55% {
              top: 36px;
          }
          100% {
              -webkit-transform: perspective(1000px) rotateX(15deg);
              -moz-transform: perspective(1000px) rotateX(15deg);
              transform: perspective(1000px) rotateX(15deg);
              left: 14px;
              right: 14px;
          }
      }








      @-webkit-keyframes open-laptop-bottom-part {
          0% {
              -webkit-transform: perspective(1000px) rotateX(89deg);
              transform: perspective(1000px) rotateX(89deg);
              left: 0px;
              right: 0px;
              bottom: 70px;
          }
          90% {
              bottom: 2px;
          }
          100% {
              -webkit-transform: perspective(1000px) rotateX(72deg);
              transform: perspective(1000px) rotateX(72deg);
              left: 0px;
              right: 0px;
          }
      }
      @-moz-keyframes open-laptop-bottom-part {
          0% {
              -moz-transform: perspective(1000px) rotateX(89deg);
              transform: perspective(1000px) rotateX(89deg);
              left: 0px;
              right: 0px;
              bottom: 70px;
          }
          90% {
              bottom: 2px;
          }
          100% {
              -moz-transform: perspective(1000px) rotateX(72deg);
              transform: perspective(1000px) rotateX(72deg);
              left: 0px;
              right: 0px;
          }
      }
      @keyframes open-laptop-bottom-part {
          0% {
              -webkit-transform: perspective(1000px) rotateX(89deg);
              -moz-transform: perspective(1000px) rotateX(89deg);
              transform: perspective(1000px) rotateX(89deg);
              left: 0px;
              right: 0px;
              bottom: 70px;
          }
          90% {
              bottom: 2px;
          }
          100% {
              -webkit--transform: perspective(1000px) rotateX(72deg);
              -moz-transform: perspective(1000px) rotateX(72deg);
              transform: perspective(1000px) rotateX(72deg);
              left: 0px;
              right: 0px;
          }
      }







      @-webkit-keyframes start-monitor {
          0% {
              background: #262626;
          }
          100% {
              background: #ffffff;
          }
      }
      @-moz-keyframes start-monitor {
          0% {
              background: #262626;
          }
          100% {
              background: #ffffff;
          }
      }
      @keyframes start-monitor {
          0% {
              background: #262626;
          }
          100% {
              background: #ffffff;
          }
      }






      @-webkit-keyframes ShowText {
          0% {
              opacity: 0;
          }
          100% {
              opacity: 1;
          }
      }
      @-moz-keyframes ShowText {
          0% {
              opacity: 0;
          }
          100% {
              opacity: 1;
          }
      }
      @keyframes ShowText {
          0% {
              opacity: 0;
          }
          100% {
              opacity: 1;
          }
      }